Question

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

任何指示我指向错误的方向都将受到赞赏。

我的回购是分支上的以下内容（virtualizedSelectAsync）

https://github.com/itReverie/itr-react-redux-normalizr/tree/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}
      />
    )
  }
}

注意：我使用的是Virtualized select，但行为与Select相同。

Answer 1

根据GitHub上报告的问题https://github.com/JedWatson/react-select/issues/2405 从版本1.1.0到1.2.1似乎已经破坏了，因为默认情况下onSelectResetsInput为TRUE。诀窍是添加**onSelectResetsInput={false} onBlurResetsInput={false}**

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

Answer 2

是的，看起来像是return Promise.resolve( this.dispatchSuggestions(newTextValue))的异步问题。您应该考虑使用async/await，或者您应该触发操作然后返回文本。

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;
}

... OR

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() !=="")
    {
        Promise.resolve( this.dispatchSuggestions(newTextValue));
    }
    // Always return the entered text value
    return newTextValue;
}

react-select onInputChange清除值，并且不会在按Enter键后使用所选值更新文本框。

2 个答案: