0

我正在使用react-select并尝试通过 ajax 调用使用onInputChange道具动态更新选项数组，这里的问题是由于 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标签输入的东西（类似但不完全相同）

4

1 回答 1

1

由于this.forceUpdate();，您的表单被删除并重新显示。要让您的选择字段保持当前值，您必须保存组件中的输入_getUsers: function(input)，然后<Select>通过 prop将其提供给value。

forceUpdate此外，如果您调用，则无需调用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
    });
}
于 2016-05-04T08:02:51.823 回答