Question

在我的React应用程序中，我有多个复选框，我使用onClick切换选中的状态，它设置了状态，但是它为页面中的所有复选框更改了状态，我只希望按下一个，这是代码：

初始状态：

newgrouping

复选框：

state: {checked: false}

功能：

return boxes.map(box => (
<Checkbox checked={this.state.checked} onClick={() => this.onCheck(box.id)} />
))

Answer 1

然后，每个复选框都必须具有一个状态变量。为简单起见，让我们将所有布尔值定义第n个复选框是否已检查到单个数组中。

您可以编写这样的最小组件：

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { boxes: [{id: 10}, {id: 20}] };
    this.state.checked = this.state.boxes.map(() => false);
    this.onCheck = this.onCheck.bind(this);
  }
  onCheck(id) {
    let index = this.state.boxes.findIndex(box => box.id==id);
    this.setState({
      checked: this.state.checked.map((c,i) => i==index ? !c : c)
    })
  }
  render() {
    return (<div>
      {this.state.boxes.map((box,i) => (
        <input
          key={box.id}
          type="checkbox"
          checked={this.state.checked[i]}
          onChange={() => this.onCheck(box.id)}
        />
      ))}
      <pre>this.state = {JSON.stringify(this.state,null,2)}</pre>
    </div>);
  }
}
  
ReactDOM.render(<App/>, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

它正在更改所有复选框，因为所有复选框都引用状态相同的变量。您可以将其ID存储在数组中：

state: {
  checkedIdArray: []
}

然后检查当前框的ID是否在数组中以确定是否已选中：

<Checkbox
  key={box.id}
  checked={this.state.checkedIdArray.includes[box.id]}
  onClick={() => this.onCheck(box.id)}
/>

最后，您的onCheck（）方法将如下所示：

onCheck(id) {
  if (this.state.checkedIdArray.includes(id)) {
    this.setState({
      checkedIdArray: this.state.checkedIdArray.filter((val) => val !== id)
    });
  } else {
    this.setState({
      checkedIdArray: [...this.state.checkedIdArray, id]
    });
  }
}

未经测试或其他任何测试，但是类似的东西应该可以让您到达想要去的地方。

setState仅适用于React应用中的单击项

2 个答案: