Question

我在React类中有一个可反应的表，其中包含每行的复选框。单击一个复选框时，它会触发单击事件，从中获取要处理的行中的数据。

问题所在。我遇到的是，即使我正在获取数据，单击时仍未检查复选框。所以，我问是否有人可以帮助我。我提供了主要代码段：

复选框行包含以下内容

check={this.checkrows.indexOf(index) }
click={this.clickrow.bind(null,row,index)}

方法是：

clicking(row,index){

    let checkrows = this.state.checkrows;
    let data = this.state.data.mydata;

    if (event.target.checked){
      if(checkrows.indexOf(index) ===-1){
            checkrows.push(row)
    }

}

Answer 1

您不应该修改组件的状态，而且您对数组的使用也有点混乱，如果您想直接访问元素，它更容易使用对象。

我写了一个小样本，看起来应该是您当前正在撰写的内容，但很难根据您提供的代码弄清楚您的组件是什么。试试这个：http://jsbin.com/yarehemuwo/edit?js,output

Answer 2

在你的设置中，你（可能是无意中）改变了状态，你真的不应该这样做。

let checkrows = this.state.checkrows;使得checkrows指向州。
稍后：checkrows.push()变异checkrows
但由于checkrows指向州，您现在正在直接改变州。

并且反应不喜欢/明确禁止你直接改变状态。

更好：

clicking(row,index){
  // add slice() to make a copy of the checkrows in state
  let checkrows = this.state.checkrows.slice();
  // same for data (although not used in your example)
  let data = this.state.data.mydata.slice();

  if (event.target.checked){
    if(checkrows.indexOf(index) === -1){
      // pushing new row is now done in copy, not in state directly
      checkrows.push(row);
      // followed by properly setting new state
      this.setState( { checkrows : checkrows });
    }
  }
}

此外，位checkrow.indexOf(index)有点奇怪：如果要检查某个对象是否属于数组，可以使用.indexOf(myObject)。但是你不能用它来检查索引（通常是数字0或1或2等）是否是数组的一部分。也许index实际上是对象，而不是索引号。但是我建议将其重命名为rowobject或其他东西以避免混淆。

单击时未选中复选框

2 个答案: