ReactJs 复选框 - 无法取消选中答案

【问题标题】：ReactJs Checkbox - cannot uncheckReactJs 复选框 - 无法取消选中
【发布时间】：2015-10-29 06:16:17
【问题描述】：

我正在尝试使用状态设置复选框的选中属性，使用 handleChange 函数更新代码：

getInitialState: function() {
    return {
        selected:0,
        contactId: 0
    };
},

handleChange: function(e) {
    var id = this.state.contactId;

    console.log(e.target.checked);

    if (e.target.checked === true){

        console.log('selected');

        contactChannel.publish({
                    channel: "contact",
                    topic: "selectedContact",
                    data: {
                        id: [id]
                    }});

    } else{

        basketChannel.publish({
            channel: "basket",
            topic: "removePersonFromBasket",
            data: {
                id: [id]
            }
        });


        console.log('deselected flag');


    }
},
render: function() {

    var id = this.state.contactId;
    var isSelected = this.state.selected;

    console.log(isSelected);

    return (
        <div className="contact-selector">
            <input type="checkbox"
                   checked={isSelected}
                onChange={this.handleChange} />
        </div>
    );
}

但是，一旦复选框被默认选中，我就无法取消选中它，谁能告诉我该怎么做？

非常感谢

【问题讨论】：

可以添加handleChange函数吗？

标签： javascript checkbox reactjs

【解决方案1】：

在handleChange 函数中，复选框的状态始终使用相同的值，但您需要反转它。

将此添加到您的 handleChange 函数中：

handleChange:function(event){
    this.setState({selected: !this.state.selected}); //look at the !NOT sign

}

【讨论】：

【解决方案2】：

问题是因为你返回了错误的变量。用{this.state.selected} 更改{isSelected} 应该可以工作。

getInitialState: function() {
    return {
        selected:0,
        contactId: 0
    };
},


render: function() {

    var id = this.state.contactId;
    var isSelected = this.state.selected;

    console.log(isSelected);

    return (
        <div className="contact-selector">
            <input type="checkbox"
                   checked={this.state.selected}
                onChange={this.handleChange} />
        </div>
    );
}

【讨论】：

为什么会这样？它们具有相同的值。
改成checked={this.state.selected}，还是不能取消勾选，有什么想法吗？
对不起，我试过了...我来自 ReactJS 以外的另一个世界，重新计算仅在返回的字符串上完成...因此为什么 isSelected 总是具有相同的值...

【解决方案3】：

getInitialState: function() {
    return {
        selected:0,
        contactId: 0
    };
},

handleChange:function(event){
    this.setState({selected: !this.state.selected});
    isSelected = this.state.selected;

    console.log(isSelected);
}

render: function() {

    var id = this.state.contactId;
    var isSelected = this.state.selected;

    console.log(isSelected);

    return (
        <div className="contact-selector">
            <input type="checkbox"
                   checked={isSelected}
                onChange={this.handleChange} />
        </div>
    );
}

【讨论】：

这将再次保持相同的值。