Question

我正在使用多个复选框构建组件 - 每个复选框都属于一个类别。

当我在boolean var中只有一个复选框时，它完美地工作（类似于Thinking in React），但是当我将状态放入数组时，我得到了不受控制的形式警告：

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

组件：

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

您的input元素中没有'value'属性。 React Documentation说

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

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

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

不受控制的组件保持其自身的内部状态。

Answer 2

您正在使用单个值替换您所在州的数组。只需将复选框索引传递给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;
                    );
    });
},

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

2 个答案: