ReactJS：状态数组 - 不受控制的输入

Question

我正在构建带有多个复选框的组件 - 每个复选框对应一个类别。

当我在布尔变量中只有一个复选框时，它可以正常工作（类似于Thinking in React），但是当我将状态放入数组时，我会收到不受控制的表单警告：

react.js:20541 警告：CheckComponent 正在将 >type 复选框的受控输入更改为不受控制。输入元素不应从 >受控切换到不受控（反之亦然）。决定在 >组件的生命周期内使用 >受控或不受控的输入元素。

组件：

handleChange: function(e) {
    this.props.onUserInput(
        this.refs[e.target.name].checked
    );
},
render: function(){
    var self = this;
    return(
        <div>
            <ul>
                {
                categories.map(function(d, i){
                    return (
                            <li key = {d}>
                                <input type="checkbox" checked={self.props.checkedBox[i]} name={d} ref={d} onChange={self.handleChange}/>
                                <span> {d} </span>
                            </li>
                        );
                })
                }
            </ul>
        </div>
    );
}

父组件：

getInitialState: function(){
  return{
      checkedBox: [true,true,true,true,true,true,true,true,true,true]
  };  
},
handleUserInput: function(checkedBox) {
    this.setState({
        checkedBox: checkedBox
    });
},
render: function(){
    return(
        <div>
            <CheckComponent checkedBox={this.state.checkedBox} onUserInput={this.handleUserInput} categories={this.props.categories}/>
            <DisplayComponent checkedBox={this.state.checkedBox} data={this.props.data}/>
        </div>
    );
}

这个数组有问题吗？

Answer 1

您正在用单个值替换您所在州的数组。 只需将复选框索引传递给 onChange 函数即可。

handleChange: function(i) {
    this.props.onUserInput(i);
},

...

<input type="checkbox" checked={self.props.checkedBox[i]} name={d} ref={d} onChange={function() {self.handleChange(i);}}/>

然后在您的用户输入中更改指定索引处的值。

handleUserInput: function(i) {
    this.setState({
        checkedBox: this.state.checkedBox.map(function(val, idx) {
                        if (idx === i) return !val; 
                        return val;
                    );
    });
},

Answer 2

您的输入元素中没有“值”属性。 React Documentation 说

没有值属性的组件是不受控制的组件

render: function() {
    return <input type="text" />;
}

这将呈现一个以空值开头的输入。任何 用户输入将立即被渲染元素反映。如果 您想收听值的更新，您可以使用 onChange 事件就像您可以使用受控组件一样。

一个不受控制的组件维护它自己的内部状态。