爲什麼複選框給出狀態問題？

Question

在render()功能我有以下的代碼來生成複選框

var cbCollection = this.state.cbData.map(function(elem, index) { 

    var x=<span><label><input type = "checkbox" name = "cbCodes" id = "cb-{index}" value={elem.Id} checked={true} disabled={false} />{elem.DiagCodes}</label><br /></span> 
    return x; 

}) 

它產生的checkboxes，但我無法從他們被凍結的UI uncheck他們，我該如何解決這一問題？

注意：目前我已經硬編碼檢查狀態假設檢查狀態也來自數據庫。在這種情況下如何使複選框可檢查和不可檢查？

UPDATE：

我已經修改了代碼：

// 
    getInitialState:function(){ 
    return{ 
     data1:[], 
     data2:[], 
     cbData:[], 
     cbCheckState:false 
    } 
}, 
    UpdateCheckbox:function(elem){ 
alert(elem.IsSelected); 
     this.setState({cbCheckState:elem.IsSelected}); 
    }, 
render:function(){ 
    var cbCollection = this.state.cbData.map(function(elem, index) { 
     //this.setCheckboxValue(elem.IsSelected); 
     var x=<span><label><input type = "checkbox" name = "cbCodes" id = {'cb-'+index} value={elem.Id} checked={this.state.cbCheckState} disabled={false} onChange={this.UpdateCheckbox(elem.IsSelected).bind(this)}/>{elem.DiagCodes}</label><br /></span> 
     return x; 

    }) 

return({cbCollection})  
} 

，現在它不顯示的複選框，IE引發錯誤

SCRIPT5007：無法獲取屬性「狀態」未定義或爲空 參考

內部代碼執行一些AJAX調用以從DB獲取數據並且DB將數據返回到dbData數組。

更新：2 這裏是函數updateCheckbox（）

UpdateCheckbox:function(elem){ 
    alert(elem.IsSelected); 
    this.setState({cbCheckState:elem.IsSelected}); 
}, 

警報打印未定義當我手動點擊複選框

更新3：更新UpdateCheckbox（）直到點擊時顯示未定義

UpdateCheckbox:function(elem){ 

    elem.IsSelected = ! elem.IsSelected 
    alert(elem.IsSelected); 
    // this.setState({cbCheckState:elem.IsSelected}); 
}, 

渲染（）：

var cbCollection = this.state.cbData.map(function(elem, index) { 
    //this.setCheckboxValue(elem.IsSelected); 
    var x=<span><label><input type = "checkbox" name = "cbCodes" id = {'cb-'+index} value={elem.Id} checked={this.state.cbCheckState} disabled={false} onChange={this.UpdateCheckbox.bind(this,elem.IsSelected).bind(this)}/>{elem.DiagCodes}</label><br /></span> 
    return x; 

}.bind(this)) 

更新：4 更新渲染（）：

var cbCollection = this.state.cbData.map(function(elem, index) { 
    //this.setCheckboxValue(elem.IsSelected); 
    var x=<span><label><input type = "checkbox" name = "cbCodes" id = {'cb-'+index} value={elem.Id} checked={this.state.cbCheckState} disabled={false} onChange={this.UpdateCheckbox.bind(this,elem)}/>{elem.DiagCodes}</label><br /></span> 
    return x; 

}.bind(this)); 

它仍然不檢查複選框DB檢查值，但當我手動檢查alert（）顯示true但另一個奇怪的事情我當我打沒關係警報（）的選中的複選框變爲選中

更新5：現在的DB檢查得到遏制，但仍當我點擊確定警報的手動選中的複選框得到選中

var cbCollection = this.state.cbData.map(function(elem, index) { 
     //this.setCheckboxValue(elem.IsSelected); 
     var x=<span><label><input type = "checkbox" name = "cbCodes" id = {'cb-'+index} value={elem.Id} checked={elem.IsSelected} disabled={false} onChange={this.UpdateCheckbox.bind(this,elem)}/>{elem.DiagCodes}</label><br /></span> 
     return x; 

    }.bind(this)); 

Answer 1

你需要通過對檢查變量並讓功能的onClick或那的onChange改變變量的真或假

var cbCollection = this.state.cbData.map(function(elem, index) { 
     //this.setCheckboxValue(elem.IsSelected); 
     var x=<span><label><input type = "checkbox" name = "cbCodes" id = {'cb-'+index} value={elem.Id} checked={this.state.cbCheckState} disabled={false} onChange={this.UpdateCheckbox.bind(this,elem.IsSelected).bind(this)}/>{elem.DiagCodes}</label><br /></span> 
     return x; 

    }.bind(this)) 

這就是我認爲是這樣做的最佳方式！我不知道從哪裏來的cbData，但這是做到這一點的方式..！

   UpdateCheckbox:function(index){ 
       this.state.cbData[index].IsSelected = !this.state.cbData[index].IsSelected; 
       this.setState(this.state.cbData); 

      }, 
       render:function(){ 
       var cbCollection = this.state.cbData.map(function(elem, index) { 
       //this.setCheckboxValue(elem.IsSelected); 
       var x=<span><label><input type = "checkbox" name = "cbCodes" id = {'cb-'+index} value={elem.Id} checked={this.state.elem.isSelected} disabled={false} onChange={this.UpdateCheckbox.bind(this,index)}/>{elem.DiagCodes}</label><br /></span> 
       return x; 

      }.bind(this)) 

       return({cbCollection}) 
      }