Question

对于下面的代码，我想点击onClick事件并将aria-checked值从false更改为true，同时点击第1项到第2到第3项，前一个当你点击下一个时变得虚假。最好的方法是什么？

render() {
      return (
        <div>
          <div aria-checked={this.state.checked}>item 1</div>
          <div aria-checked={this.state.checked}>item 2</div>
          <div aria-checked={this.state.checked}>item 3</div>
        </div>
      )
    }

在constructor我初始化状态为this.state = ({ checked: false })

Answer 1

您使用相同的值this.state.checked作为所有项目的道具，因此如果值为true，则当然会检查所有项目。您需要存储的是当前检查项目的索引。

这将是：

changeCheckedIndex = i => {
  this.setState({ checkedIndex: i });
}

render() {
  return (
    <div>
      <div onClick={() => this.changeCheckedIndex(0)} aria-checked={this.state.checkedIndex === 0}>item 1</div>
      <div onClick={() => this.changeCheckedIndex(1)} aria-checked={this.state.checkedIndex === 1}>item 2</div>
      <div onClick={() => this.changeCheckedIndex(2)} aria-checked={this.state.checkedIndex === 2}>item 3</div>
    </div>
  )
}

动态更改aria检查值的最佳方法

1 个答案: