复选框保持React JS中组件之间的状态

Question

I'm new in React JS, but I read about <input> that you have to save actual state in onChange like described here: React DOC - Forms

I have a list with a checkbox and I applied same behavior here in 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'));

My problem is, if I check the checkbox at the campaign with name First and then I remove first item by campaignsData.shift() (to simulate downloading new data from Server) and then render again, checkbox at Second campaign is checked.

What is the purpose of this.state when it is not attached to the instance. Render works fine, because in the console is printed Second true , so this.state.checked was moved from First to Second campaign.

Answer 1

You should add unique key property to multiple components, so that React can keep track of identities:

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