使用onInputChange與Ajax調用

Question

我使用react-select，並試圖通過一個Ajax調用onInputChange道具陣列動態更新選項反應-選擇，這裏的問題是文字輸入得到reseted每次用戶按一個鍵，因爲的DOM更新。我的代碼如下

render: function() { 
    var valueField; 
    if(this.props.editAble){ 

     valueField = <td className="col-md-12"> 
             <Select ref="child" options={options} onInputChange={this._getUsers}/> 
            </td>; 
    } 
    else{ 
     valueField = <td>{this.props.value}</td>; 
    } 

    return (
     <tr> 
      <td className="info-key">{this.props.param}</td> 
      <td className="sep">:</td> 
      {valueField} 
     </tr> 
    ); 
}, 
_getUsers: function(input){ 
    UserActions.search(input); 
    var optionsDirty = UserStore.getUsers(); 
    options = []; 
    //debugger; 
    optionsDirty.map(function(option){ 
     options.push({value:option.id, label:option.firstName+' '+option.lastName}); 
    }); 
    this.forceUpdate(); 
} 

什麼，我試圖讓這裏有點像 stackoverflow tags input（相似但不完全相同）

Answer 1

因爲this.forceUpdate();的，你的表格將被刪除並重新顯示。要使您的選擇字段保持當前值，您必須將輸入從_getUsers: function(input)保存到您的組件中，然後通過支持value將其輸入<Select>。如果你打電話給setState：它也會刷新你的組件。在這種情況下，你應該把你的選擇置於狀態。

做更多的東西，如：

render: function() { 
    var valueField; 
    if(this.props.editAble){ 
     valueField = <td className="col-md-12"> 
             <Select ref="child" options={this.state.options} onInputChange={this._getUsers} value={this.state.value}/> 
            </td>; 
    } 
    else{ 
     valueField = <td>{this.props.value}</td>; 
    } 

    return (
     <tr> 
      <td className="info-key">{this.props.param}</td> 
      <td className="sep">:</td> 
      {valueField} 
     </tr> 
    ); 
}, 
_getUsers: function(input){ 
    UserActions.search(input); 
    var optionsDirty = UserStore.getUsers(); 
    options = []; 
    //debugger; 
    optionsDirty.map(function(option){ 
     options.push({value:option.id, label:option.firstName+' '+option.lastName}); 
    }); 

    //update component with new options and the current value 
    this.setState({ 
     options:options, 
     value:input 
    }); 
}