在 React 中获取 Selected 值-Select

Question

我正在尝试实施 this example that obtains the user selected value, 但使用的是异步 select 版本。

我想获取用户 select 编辑的值，但是查看有关 react-select 的文档并不清楚如何操作。如果您将状态设置为等于 inputValue，则只要单击 'submit' 按钮，inputValue 就会被清除。你回来

" "

而不是

user selected value

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

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

任何人都可以帮助我或指出正确的方向吗？

编辑

Here is a link to a working demo 如果以后有人遇到这个问题。

Answer 1

所以，你弄错的是 react-select 的 props 获取 on-change 的价值。在 AsyncSelect 组件上使用 onChange 而不是 onInputChange。两种道具都有不同的用途。这是可用于 react-select 的所有道具的文档。 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"
        />
}

在 React 中获取 Selected 值-Select

Obtaining Selected Value in React-Select

reactjs

react-select

编辑