为什么复选框给出状态问题？

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}) 
      }