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>
    );
},

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

道具：对象 data：对象 联系人：数组[10] 0：对象 Id：13211， isSelected：true

我有一个状态的屏幕截图，其中包含isSelected值，但我无法找到如何在组件的checked属性中获取该值？我需要以某种方式映射吗？

我的初始值是：

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>
    );
}