Question

当我运行以下代码时，我收到此警告。如何删除错误？

谢谢。

警告：表单propType失败：您向没有value处理程序的表单字段提供了onChange道具。这将呈现一个只读字段。如果该字段应该是可变的，请使用defaultValue。否则，请设置onChange或readOnly。检查test的呈现方法。

var test = React.createClass({

getInitialState : function(){
    return {
        number : 10,
        checked: [],
        selected : []
    };
},

componentWillMount : function(){

},

moreAilment : function (){
    var temp = this.state.number + 5;
    this.setState({number:temp});
},

handleChangechk: function (e){
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    var checkedCopy = this.state.checked.slice();
    var selectedCopy = this.state.selected.slice();

    if(value===true) {
            checkedCopy[name] = true;
            selectedCopy [name] = name; }
    else {  
            checkedCopy[name] = false;
            selectedCopy [name] = '';  }

    this.setState({
               checked: checkedCopy,
              selected: selectedCopy });
},


render : function() {

    var ailmentsList = [];
    var selectedList= [];

    for (var i = 0; i < this.state.number; i++) {

        ailmentsList.push(<span ><input type="checkbox" checked={!!this.state.checked[i]}  onChange={(e)=> {this.handleChangechk(e)}} /><span ></span><label> Asthma {i}</label></span>);
        if(this.state.selected[i])
            {
                selectedList.push(this.state.selected[i]); 
            }
    };

    return(
            <div className>
                {selectedList}
            </div>
        );

   }
});

Answer 1

你能试试吗

<div>
    <input type='checkbox' defaultChecked />
</div>

基本上，您需要在复选框中添加defaultChecked属性或者我不确定它是否会起作用但是让我们试试你可以这样做吗

onChange={this.handleChangechk}

而不是onChange={(e)=> {this.handleChangechk(e)}}

编辑：创建使用复选框和按钮切换状态复选框的工作小提琴的简单示例 http://jsfiddle.net/yeoman/payugwju/1/

反应JS警告

1 个答案: