javascript - 复选框在 React JS 中保持跨组件的状态

Question

我是 React JS 新手，但我读到了 <input>您必须将实际状态保存在 onChange 中就像这里描述的:React DOC - Forms

我有一个带有复选框的列表，并且我在 CampaignsRow 中应用了相同的行为

var campaignsData = [{Name: "First"}, {Name: "Second"}, {Name: "Third"}];

var CampaignsRow = React.createClass({
    getInitialState: function() {
        return {checked: false};
    },
    checkedChange: function (e) {
        this.setState({checked: e.target.checked});
    },
    render: function() {
        console.log(this.props.data.Name, this.state.checked);
        return (
            <div className="row">
                <div className="cell checkbox">
                    <input type="checkbox" checked={this.state.checked} onChange={this.checkedChange}/>
                </div>
                <div className="cell campaignName">{this.props.data.Name}</div>
            </div>
        );
    }
});
var CampaignsTable = React.createClass({
    render: function() {
        var rows = this.props.campaigns.map(function(campaign) {
        return (
            <CampaignsRow data={campaign}/>
        );
    });

    return <div className="table">
        <div className="row header">
            <div className="cell checkbox"><input type="checkbox"/></div>
            <div className="cell campaignName">Name</div>
        </div>
        {rows}
    </div>
  }
});

ReactDOM.render(<CampaignsTable campaigns={campaignsData} /> ,document.getElementById('reactContainer'));

我的问题是，如果我选中名为 First 的广告系列中的复选框，然后通过 campaignsData.shift() 删除第一项(模拟从服务器下载新数据)，然后再次渲染，选中第二个事件中的复选框。

this.state的目的是什么？当它未附加到实例时。渲染工作正常，因为在控制台中打印 Second true ，所以this.state.checked已从第一个广告系列移至第二个广告系列。

Answer 1

您应该添加唯一的 key多个组件的属性，以便 React 可以跟踪身份:

var rows = this.props.campaigns.map(function(campaign) {
    return (
        <CampaignsRow key={campaign.name} data={campaign}/>
    );
});