有什么方法可以防止 react-select (Select.Async) 在未聚焦时删除搜索输入值？

Question

情况：
我有一个普通的选择（类别），它决定了从 react-select 为 Select.Async 加载了哪些选项。

问题：
假设有人在 Select.Async 中搜索一个选项，而category A被选中。然后他意识到，他正在寻找的选项只能在category B. 所以他在第一次选择时切换类别。但是当他从 Select.Async 中单击搜索框时，他所做的输入消失了，他必须再次输入。

即使我在搜索输入未聚焦时更新选项集，我是否可以做些什么来保留他的输入？

<select id="categories">
    <option value="1" selected>A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<Select.Async loadOptions={load} />

完整的代码示例

Answer 1

我发现了：

valueSelect.Async的属性不是输入字段的实际值。如果你想设置value输入，有一个叫做 inputRenderer 的道具。在那里，您可以在 div 中定义一个带有所有预定义inputProps（只需编写<input {...inputProps}）的输入并自行处理该值。

render(){
    var inputChange = (input) => this.setState({value: input});
    var renderInput = (inputProps) => {
        if(this.state.value == ''){
            this.state.placeholder = 'Select ...';
        } else {
            this.state.placeholder = '';
        }
        var setCurserPosAtEnd = (event) => {
            if(event.target)
                event.target.setSelectionRange(event.target.value.length, event.target.value.length);
        }
        return (
            <div className='Select-input'>
                <input {...inputProps} value={this.state.value} onFocus={setCurserPosAtEnd} />
            </div>
        );
    }
    return(
        ...
        <Select.Async 
            loadOptions={loadOptionHandler} 
            onBlurResetsInput={false} 
            onCloseResetsInput={false} 
            inputRenderer={renderInput} 
            placeholder={this.state.placeholder} 
            onInputChange={inputChange} />
        ...
    );
}