保留反应选择中选择的选项的输入值答案

【问题标题】：Retain input value on option selected in react-select保留反应选择中选择的选项的输入值
【发布时间】：2018-09-09 10:53:12
【问题描述】：

我在我的项目中使用 react-select 2。每次用户选择一个选项时，输入值都会被清除，这会导致选项列表发生变化。
有没有办法保留输入值以便用户可以选择多个选项？这是我尝试过的：

<Select
    closeMenuOnSelect={false}
    blurInputOnSelect={false}
    isMulti
    loadOptions={this.resultProvider.bind(this)}
    inputValue={this.state.searchKey}
    onInputChange={this.handleInputChanged.bind(this)}
  />

handleInputChanged(input, reason) {
    if (reason.action === "set-value") {
        return;
    }
    this.setState({
        ...this.state,
        searchKey: input
    });
}

我创建了一个演示来演示这个问题： https://codesandbox.io/s/345rp0m041

请注意，此问题仅发生在异步选择中。

感谢您的建议！

【问题讨论】：

标签： react-select

【解决方案1】：

我认为你很接近。解决此问题的一种快速方法（尽管可能不是最好的方法）是在 handleInputChanged 方法中再添加两个检查：

handleInputChanged(input, reason) {
    if (reason.action === "set-value" ||
        reason.action === "input-blur" ||
        reason.action === "menu-close") {
          return;
    }
    this.setState({
      ...this.state,
      searchKey: input
    });
  }

这是您的代码的工作演示：https://codesandbox.io/s/8n9mx057k0

希望这会有所帮助！

旁注：在V1 of react-select 中，我们使用onSelectResetsInput 属性在用户选择选项时保留输入框的值。但好像它不再可用了

【讨论】：

感谢@Sahan Serasinghe，它仍然不适用于异步选择。当我选择一个选项时，菜单列表显示“无选项”。
我想我的问题还不清楚，我要存档的是当用户选择一个选项时仍然显示选项列表，所以他可以选择其他一些。
对于希望能够从选项中选择条目的任何人，您需要设置值状态并清除 onChange 处理程序中的 searchKey 状态。