反应 select 输入作为选项

Question

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

我的 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

您可以使用库 AsyncCreatable 提供的 HOC，而不是使用 Select.async，它允许您选择一个建议或创建一个新条目。

查看 react-readme 的 select 了解更多详情 ;)

反应 select 输入作为选项

React select input as option

react-select