Kästchen zum Ankreuzen hält Zustand über Komponenten in JS Reagieren

Question

Ich bin neu in JS Reaktion, aber ich lese über <input> dass Sie Istzustand in onChange speichern haben wie hier beschrieben: React DOC - Forms

Ich habe eine Liste mit einer Checkbox und ich bewerben ich hier gleiches Verhalten 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')); 

Mein Problem ist, wenn ich das Kontrollkästchen am Kampagne mit dem Namen erste überprüfen und ich die erste Elemente dann entfernen, indem campaignsData.shift() (zu simulieren neue Daten vom Server herunterzuladen) und dann Rendern erneut, Kontrollkästchen um Zweite Kampagne wird überprüft.

Was ist der Zweck von this.state, wenn es nicht an die Instanz angeschlossen ist. Render funktioniert gut, weil in der Konsole Second true gedruckt wird, so this.state.checked wurde von First zu Second Kampagne verschoben.

Answer 1

sollten Sie einzigartige hinzufügen key Eigenschaft auf mehrere Komponenten, so dass Spur von Identitäten halten reagieren kann:

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