Forms 将react select Async与loadOptions和redux表单一起使用

我正在使用

react select

library显示一个选择框。我使用的是

Select.Async

，因为我需要从API中提取选项。我将

Select

与

loadOptions

一起使用，它在初始页面呈现期间工作。但是，我也在使用

redux表单

，它可以动态地更改

字段

的值（使用

change

）。但是，当我像这样更改字段的值时，输入的值确实会更改（我可以验证这一点），但是react select的

loadOptions

不会再次被调用（即使我认为它应该在侦听值的更改）。我的问题是，是否有一种方法可以在每次输入值更改时动态调用loadOptions

谢谢

---

编辑：在github上回答

这可能是一个更好的解决方案，但一个快速的解决方案是为

Select.Async

组件设置一个

ref

，当触发更改操作时（如更改输入-您的案例，或一键单击事件-如下面的代码），您可以更新其选项。我用了一个类似的例子，比如文档

class您的类扩展了React.Component{
getOptions=（输入，回调）=>{
setTimeout（函数（）{
回调（null{
选项：[
{值：'1'，标签：'1'}，
{值：'two'，标签：'two'}
]
});
}, 500);
};   
更新选项=（）=>{
此选项为.selectAsync.state.options.push(
{值：'three'，标签：'three'}
)
}
render（）{
让props=this.props；
返回(
this.selectAsync=selectAsync}
loadOptions={this.getOptions}
/>
加载更多项目
)
}
}

这可能是一个比这更好的解决方案，但一个快速的解决方案是为

Select.Async

组件设置

ref

，当触发更改操作时（如更改输入-您的案例，或一键单击事件-如下面的代码），您可以更新其选项。我用了一个类似的例子，比如文档

class您的类扩展了React.Component{
getOptions=（输入，回调）=>{
setTimeout（函数（）{
回调（null{
选项：[
{值：'1'，标签：'1'}，
{值：'two'，标签：'two'}
]
});
}, 500);
};   
更新选项=（）=>{
此选项为.selectAsync.state.options.push(
{值：'three'，标签：'three'}
)
}
render（）{
让props=this.props；
返回(
this.selectAsync=selectAsync}
loadOptions={this.getOptions}
/>
加载更多项目
)
}
}

this.state={
存储区：“”，
};
this.handleStoreSelect=this.handleStoreSelect.bind（this）；
handleStoreSelect=（项目）=>{
这是我的国家({
存储：item.value
}
};

this.state={
存储区：“”，
};
this.handleStoreSelect=this.handleStoreSelect.bind（this）；
handleStoreSelect=（项目）=>{
这是我的国家({
存储：item.value
}
};

它不回答问题（您不使用redux表单）它不回答问题（您不使用redux表单）

class YourClass extends React.Component {

  getOptions = (input, callback) => {
    setTimeout(function () {
      callback(null, {
        options: [
          {value: 'one', label: 'One'},
          {value: 'two', label: 'Two'}
        ]
       });
     }, 500);
   };   

  updateOptions = () => {
    this.selectAsync.state.options.push(
      {value: 'three', label: 'Three'}
    )
  }

  render() {
    let props = this.props;

    return (
      <div>
        <Select.Async
          ref={selectAsync => this.selectAsync = selectAsync}
          loadOptions={this.getOptions}
        />
        <button onClick={this.updateOptions}>
          Load more items
        </button>
      </div>
    )
  }
}