Question

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

我想获取用户选择的值，但是通过“ react-select”文档进行检查，尚不清楚该怎么做。如果将状态设置为等于inputValue，则在单击“提交”按钮后立即清除inputValue。你回来

" "

代替

user selected value

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

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

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

编辑

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

Answer 1

所以，您错了是用react-select的道具来获得不断变化的价值。在onChange组件上使用onInputChange代替AsyncSelect。两种道具都有不同的用途。这是所有可用于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-Select中获取选定的值

编辑

1 个答案: