ReactJS:状态数组-无控制输入
ReactJS:状态数组-无控制输入
提问于 2016-08-03 08:42:08
我正在构建包含多个复选框的组件--每个复选框用于一个类别。
当布尔变量中只有一个复选框时，它工作得非常完美(类似于反应思维)，但是当我将状态放入数组中时，我得到的是不受控制的表单警告：
react.js:20541警告: CheckComponent正在将>类型的受控输入复选框更改为不受控制。输入元素不应从>受控切换到不受控制(反之亦然)。决定在>组件的生存期内使用>受控的还是不受控制的输入元素。
构成部分：
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>
);
}这个数组有什么问题吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-03 10:14:21
您正在用单个值替换状态中的数组。只需将复选框索引传递给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;
);
});
},Stack Overflow用户
发布于 2016-08-03 08:48:43
输入元素中没有“value”属性。反应文件说
无值属性是不受控制的组件。
render: function() {
return <input type="text" />;
}这将呈现以空值开头的输入。呈现的元素将立即反映任何用户输入。如果您想要侦听值的更新，可以使用onChange事件，就像您可以使用受控组件一样。 不受控制的组件保持自己的内部状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38738627
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号