ReactJs：将状态数据映射到复选框

Question

我正在尝试渲染一个复选框网格。我可以选中一个复选框并触发更新一组值的处理程序。

我的问题是，当我浏览回页面时，我希望看到默认选中数组中的值的复选框。

谁能告诉我这是怎么做的？非常感谢

handler: function(e) {

    channel.publish({
        channel: "contact",
        topic: "selectedContact",
        data: {
            id: e.target.attributes['data-ref'].value
        }
    });
},

render: function() {

    var id = this.props.data.id;
    var isSelected = this.props.data.isSelected;

    return (
        <div className="contact-selector">
            <input type="checkbox"
                checked={isSelected} data-ref={id}
                onClick={this.handler} />
        </div>
    );
},

我选择的状态作为道具传递：

道具：对象 数据：对象 联系人：数组[10] 0：对象 编号：13211， isSelected: 真

我有一个包含 isSelected 值的状态的屏幕截图，但我不知道如何在组件的选中属性中获取该值？我需要以某种方式映射它吗？

我的初始值为：

this.props.data.isSelected

但是isSelected值写入附件中的contacts数组

Answer 1

您需要将复选框设置为所谓的controlled component。简而言之，如果您只为它分配了某个 prop 的值（this.props），则实际的复选框值将无法更改，直到重新安装组件，因为除非重新安装组件，否则该属性永远不会改变-安装了新的属性。因此，您需要添加一个onChange 处理程序，并在单击时更新组件的状态，以便组件以新状态重新渲染。像这样的：

getInitialState: function() {
    return {isSelected: this.props.data.isSelected};
},
handleChange: function(e) {
    var selected = !this.state.isSelected;
    this.setState({isSelected: selected});
},
render: function() {

    var id = this.props.data.id;
    var isSelected = this.state.isSelected;

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