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，但我不能{@ 1}}它们被冻结的UI，我该如何解决？

注意：目前我已经对检查状态进行了硬编码，假设检查状态也来自数据库。在这种情况下如何使复选框可检查和取消选中？

更新：

我修改了这样的代码：

uncheck

现在它没有显示复选框，IE会抛出错误

SCRIPT5007：无法获取未定义或null的属性“state” 参考

内部代码执行一些AJAX调用以从DB获取数据，DB将数据返回到// 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}) }数组。

更新：2 这是函数updateCheckbox（）

dbData

当我手动点击复选框

时，

警告打印未定义

更新3：更新的UpdateCheckbox（）仍然在点击时显示为undefined

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

渲染（）：

UpdateCheckbox:function(elem){

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

更新：4 更新了render（）：

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

仍然没有检查数据库检查值的复选框，但是当我手动检查alert（）显示 true 但另一个奇怪的事情是当我点击警报的确定（）时，选中的复选框变为未选中状态< / p>

更新5：现在数据库检查已经检查但是当我点击确定警报时，手动选中的复选框将被取消选中

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

Answer 1

你需要在checked和make函数上传递一个变量onClick或onChange，它将该变量改为true或false

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

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

1 个答案: