在react-select中选择的选项上保留输入值

时间:2018-09-09 10:53:13

标签: react-select

我在项目中使用react-select 2。每次用户选择一个选项时,都会清除输入值,这会导致选项列表更改。
有什么方法可以保留输入值,以便用户可以选择多个选项? 这是我尝试过的:

ffmpeg -i lucy.mp4 -crf 20 lucy.webm  (method 1)

ffmpeg -i lucy.mp4 -crf 4 lucy.webm   (method 2)

ffmpeg -i lucy.mp4 -b:v 320k -q:v 0 output.webm (method 3)

ffmpeg -i lucy.mp4 -b:v 1M output.webm (method 4)


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

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

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

感谢您的建议!

1 个答案:

答案 0 :(得分:2)

我认为您非常接近。解决此问题的一种快速方法(虽然可能不是最好的方法)是在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道具可以在用户选择一个选项时保留输入框的值。但似乎不再可用