reactjs - 在React-Select中获取选择的值

Question

我正在尝试实现 this example that obtains the user selected value, 但使用异步选择版本。

我想获取用户选择的值，但是浏览有关react-select的文档并不清楚该怎么做。如果您将 state 设置为等于 inputValue，则一旦单击“提交”按钮，inputValue 就会被清除。你回来了

""

而不是

用户选择的值

我不确定如何使用异步选择组件获取用户选择的值。我的 API 数据已成功填充和过滤建议框，但我不知道如何获取所选值。

我尝试了多种方法，最后尝试使用上面链接中的 refs 方法，但存储的值显示为空。而不是存储用户选择的值。 Here is the link to my broken codesandbox 。

有人可以帮助我或为我指明正确的方向吗？

编辑

Here is a link to a working demo如果将来有人陷入这个困境。

Answer 1

所以，你错了的是react-select的 Prop 在变化时获取值(value)。在 AsyncSelect 组件上使用 onChange 而不是 onInputChange。两种 Prop 都有不同的用途。这是可用于 react 选择的所有 Prop 的文档。 https://react-select.com/props 尝试下面的代码

textChange = inputValue => { // whole object of selected option 
    this.setState({ inputValue:inputValue.value });
};

render(){
....
        <AsyncSelect
          defaultOptions
          loadOptions={this.promiseOptions}
          onChange={this.textChange} /** onChange triggers only when user change the
           options but onInputChange triggers on each change which is for different
           purpose like for e.g. when user type, fetch similar options **/
          name="options"
        />
}