有什么方法可以防止 react-select (Select.Async) 删除 unfocus 时的搜索输入值吗？

Question

情况：
我有一个普通的 select(categories)，它确定从 react-select.

为 Select.Async 加载哪些选项 问题：
假设有人在 Select.Async 中搜索一个选项，而 category A 是 selected。然后他意识到，他正在搜索的选项仅在 category B 中可用。所以他在第一个 select 中切换类别。但是当他点击 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} />

Complete code-sample

Answer 1

我想这就是你要找的道具：

<Select.Async loadOptions={load} onBlurResetsInput={false}/>

更多选项here

完整工作example:

export default class Layout extends React.Component {

  constructor()
  {
     super();
     this.state = {value: ""};  
  }

  render(){
    var load = (input, callback) => this.load(input, callback);
    return (
      <div class="container">
        <select id="select">
          <option value="1" selected>A</option>
          <option value="2">B</option>
          <option value="3">C</option>
        </select>

        <Select.Async 
          value={this.state.value}
          onBlurResetsInput={false}
          onChange={(newValue) => {
            this.setState({value: newValue});
          }}           
          loadOptions={load} />
      </div>
    );
  }

  load(input, callback){
    var select = document.getElementById("select");
    var selected = select.options[select.selectedIndex].value;
    console.log(selected);
    var options = [];
    switch(selected){
      case "1":
        options = [{label: "A", value: 1}, {label: "B", value: 2}, {label: "C", value: 3}];
        break;
      case "2":
        options = [{label: "D", value: 4}, {label: "E", value: 5}, {label: "F", value: 6}];
        break;
      case "3":
        options = [{label: "G", value: 7}, {label: "H", value: 8}, {label: "I", value: 9}];
        break;
    }

    callback(null, {
      options: options
    });
  }
}

Answer 2

我发现了：

Select.Async 的属性 value 不是输入字段的实际值。如果你想设置输入的 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} />
        ...
    );
}

有什么方法可以防止 react-select (Select.Async) 删除 unfocus 时的搜索输入值吗？

Is there any way to prevent react-select (Select.Async) from deleting the search input value on unfocus?

javascript

reactjs

react-select