Reactjs react select onInputChange清除值，不使用按enter键后选择的值更新文本框。

我不知道为什么反应选择清除我在第二个或第三个字符后键入的内容。根据我的日志，状态已正确更新。我认为操作可能是异步进行的，但即使是在更新之后，我也希望select上的文本会根据状态进行更新。除此之外，当从列表中选择一个选项并按enter键时，它不会在文本框中显示所选内容，但会在更新状态时识别所选内容

如能为我指出错误所在，我们将不胜感激

分支上的我的回购如下（virtualizedSelectAsync）

我的组成部分如下：

class Selector extends Component {

  componentWillMount()
   {
     this.onChange = this.onChange.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
     this.dispatchSuggestions = this.dispatchSuggestions.bind(this);
   }

  //I update the state just when an option has been selected 
  onChange(selectedOption){
    let newValue='';
    if(selectedOption !== null){
      newValue=selectedOption.name;
    }
    this.props.actions.updateTextSuccess(newValue.toLowerCase(),
                                    this.props.questionId, 
                                    this.props.partId)
}

dispatchSuggestions(newTextValue)
{
  //First I update the state of the text with the values I want to send to the API and provide me suggestions based on that value
  return  
       this.props.actions.updateTextSuccess(newTextValue.toLowerCase(),
                                       this.props.questionId,
                                       this.props.partId)
         .then(data => {
          //After updating the text then dispatch the action to load 
          //the suggestions
          return this.props.actions.loadSuggestions(
                this.props.parts.get('byPartId'),
                this.props.questionId,
                this.props.partId)
                .then(textUpdated=>{return textUpdated;})})

}


onInputChange (newTextValue)
 {   //I just want to dispatch the suggestions after the user has typed 
     // 3 characters so the API has some context and return the 
     // necessary suggestions
     if(newTextValue.length===3 && newTextValue.trim() !=="")
     {
       return Promise.resolve( this.dispatchSuggestions(newTextValue))
     }
    return newTextValue;
 }
  render () {
    let suggestions=[];
    if(this.props.part.get('suggestions').size === undefined){
      suggestions=this.props.part.get('suggestions');
    }
    else {
      suggestions=this.props.part.get('suggestions').toJS();
    }
    return (
      <VirtualizedSelect style={{width:'180px'}}
        options={suggestions}
        labelKey='name'
        valueKey='name'
        value={this.props.part.toJS().text}
        onChange={this.onChange}
        onInputChange={this.onInputChange}
      />
    )
  }
}

类选择器扩展组件{
组件willmount（）
{
this.onChange=this.onChange.bind（this）；
this.onInputChange=this.onInputChange.bind（this）；
this.dispatchSuggestions=this.dispatchSuggestions.bind（this）；
}
//我仅在选择某个选项时更新状态
onChange（选择选项）{
让newValue=''；
if（selectedOption！==null）{
newValue=selectedOption.name；
}
this.props.actions.updateTextSuccess（newValue.toLowerCase（），
这个.props.questionId，
这个。道具。partId）
}
调度建议（newTextValue）
{
//首先，我用要发送给API的值更新文本的状态，并根据该值提供建议
返回
this.props.actions.updateTextSuccess（newTextValue.toLowerCase（），
这个.props.questionId，
这个。道具。partId）
。然后（数据=>{
//更新文本后，然后分派要加载的操作
//建议
返回this.props.actions.loadSuggestions(
this.props.parts.get（'byPartId'），
这个.props.questionId，
这个。道具。partId）
.then（textUpdated=>{return textUpdated；}）}）
}
onInputChange（newTextValue）
{//我只想在用户键入后发送建议
//3个字符，以便API具有某些上下文并返回
//必要的建议
if（newTextValue.length==3&&newTextValue.trim（）！==“”）
{
return Promise.resolve（this.dispatchSuggestions（newTextValue））
}
返回newTextValue；
}
渲染（）{
让建议=[]；
if（this.props.part.get（'suggestions'）。size==未定义）{
建议=this.props.part.get（'suggestions'）；
}
否则{
建议=this.props.part.get（'suggestions'）.toJS（）；
}
返回(
)
}
}

---

注意：我使用的是虚拟化select，但其行为与select相同

是的，

返回Promise.resolve（this.dispatchSuggestions（newTextValue））

似乎存在异步问题。您应该研究使用，或者您应该启动操作，然后返回文本

async onInputChange (newTextValue)
{   //I just want to dispatch the suggestions after the user has typed 
    // 3 characters so the API has some context and return the 
    // necessary suggestions
    if(newTextValue.length===3 && newTextValue.trim() !=="")
    {
        return await Promise.resolve( this.dispatchSuggestions(newTextValue))
    }
    return newTextValue;
}

或者

---

基于GitHub上报告的问题 从1.1.0版到1.2.1版，似乎出现了一些问题，因为OnElectresetInput默认为TRUE。诀窍是添加

**onelectresetsintput={false}onBlurResetsInput={false}**

render() {
    return <ReactSelect {...props} onSelectResetsInput={false} onBlurResetsInput={false}/>;
}

render（）{
返回；
}

谢谢，我试过你的建议，但还是一样。我想知道是否有其他东西会清除该值，因为从列表中选择一个项目时，它不会填充文本框，并且与异步无关。@Iteverie看起来该值来自

this.props.part.toJS（）.text

。所以你需要了解这个.props.part是如何设置的。我想你是对的。我的redux状态是不可变的，因此可能是Select中的状态与我的不可变组件的状态不同步…将继续检查该方向（更新不可变状态）。

render() {
    return <ReactSelect {...props} onSelectResetsInput={false} onBlurResetsInput={false}/>;
}