複選框保持跨組件的狀態作出反應JS

我在陣營JS新的，但我讀到<input>，你必須保存onChange實際狀態喜歡這裏描述：React DOC - Forms 複選框保持跨組件的狀態作出反應JS

我有一個複選框列表，並我在這裏應用於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'));

我的問題是，如果我選中該複選框在廣告活動名稱爲首先，然後我通過campaignsData.shift()除去第一項（模擬從服務器下載新數據），然後再次提交，複選框第二個活動被選中。

this.state未連接到實例時的用途是什麼。渲染工作正常，因爲在控制檯打印Second true，所以this.state.checked被從第一個到第二個運動。

來源

2016-05-12 Arxeiss

也許將像鑰匙' '會有所幫助。 –

[小提琴]（https://jsfiddle.net/reactjs/69z2wepo/）看起來不錯，只是你錯過了'key'屬性 –

我能幫你解決嗎？如果一個項目被選中，它應該從廣告系列表中刪除？ – hyde

你應該獨特key屬性添加到多個組件，以便作出反應可以跟蹤的身份：

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

來源

2016-05-12 10:33:14

複選框保持跨組件的狀態作出反應JS

回答

相關問題