Question

我正在映射一个数组，并且为每个元素添加一个复选框。复选框具有“已选中”属性，并根据状态对其进行切换。但是，当我单击一个复选框时，它将切换所有复选框。如何切换单个复选框？

let respondent = data.map((item, idx) => {
  const { personalData, status_id } = item

  return (
    <div key={idx} className="respondents-list_item">

      <Checkbox
        onClick={() => this.addCheckedToArray(status_id)}
        checked={isChecked}
      />

      <div className="respondents-line">
        <div>
          {personalData.name}
        </div>
      </div>

    </div>
  )
})

addCheckedToArray(id) {
    const { arrayOfStatusId } = this.state

    this.setState({
      isChecked: !this.state.isChecked
    })

    if (arrayOfStatusId.includes(id)) {
      let index = arrayOfStatusId.indexOf(id)

      arrayOfStatusId.splice(index, 1)
    } else {
      arrayOfStatusId.push(id)
    }
  }

Answer 1

看起来您对状态有些困惑，您必须在状态中跟踪检查项目的列表，并且不仅要更新isChecked值，还需要更新数组，在这种情况下，每个项目都会一起切换，因为它们正在寻找相同的属性进行切换

<li>

反应语义ui复选框，如何切换单个元素？

1 个答案: