Question

我正在使用react-select并尝试使用 onInputChange 动态通过ajax调用动态更新选项数组，此处的问题是文本输入每次用户因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)的输入，然后通过道具<Select>将其输入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
    });
}

使用带有ajax调用的onInputChange进行react-select

1 个答案: