Question

我正在尝试创建通用的异步React Select。目前，我的“选择”正在显示通过外部API加载的建议（使用输入的邮件）。用户被迫选择建议。在以后的文章中，我还想提供一个单独的Input可能性，用户可以在不选择建议的情况下输入自己的邮件。对于这些问题，我找不到任何解决方案。任何帮助都会对我有很大帮助。

我的React Select（异步类型）

 export default class AsyncSelect extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedOption: ""
    }
    this.handleChange = this.handleChange.bind(this)
    this.loadOptions = this.loadOptions.bind(this)
  }

  handleChange(selectedOption){
    this.setState({ selectedOption })
    if(this.props.onOptionSelect){
        this.props.onOptionSelect(selectedOption)
    }

  }

  loadOptions(input, callback) {
    this.props.loadOptions(input).then(options => {
      callback(null, {options: options})
    })
  }

  render() {
    return (
      <div className="form-group">
        <Select.Async
          value={this.state.selectedOption}
          onChange={this.handleChange}
          loadOptions={this.loadOptions}
          isLoading={false}
          placeholder={this.props.label}
        />
      </div>
    )
  }
}

AsyncSelect.propTypes = {
  value: PropTypes.string,
  loadOptions: PropTypes.func.isRequired
}

Answer 1

代替使用Select.async，您可以使用lib AsyncCreatable提供的HOC，它允许您选择建议或创建新条目。

检查react-select的readme以获得更多详细信息；）

反应选择输入作为选项

1 个答案: