Question

这是我第一次开发React应用程序。似乎在复选框的选中和更改的属性中添加功能以及检查表中的所有行时遇到错误。

在此示例中，似乎没有用于创建构造函数和状态的类。

谢谢您的帮助。

{{1}}

Answer 1

您需要一种方法来跟踪每个选中的行并将其存储在状态中。

let checkedMap = new Map()
rows.forEach(row => checkedMap.set(row, false)) //preset each to false, ideally w/ a key instead of the entire row
this.setState({checkedMap: checkedMap})

<input
  type="checkbox"
  className="checkbox"
  checked={this.state.checkedMap.get(original)} //again, use a key
  onChange={() => handleCheckedChange(original)}
/>

handleCheckedChange(row) {
  let modifiedMap = this.state.checkedMap
  modifiedMap.set(row, !this.state.checkedMap.get(row))
  this.setState({checkedMap: modifiedMap})
}

ETA：对于钩子：

const [checkedMap, setCheckedMap] = useState(new Map())
let newMap = new Map()
rows.forEach(row => newMap.set(row, false)) //preset each to false, ideally w/ a key instead of the entire row
setCheckedMap(newMap)

<input
  type="checkbox"
  className="checkbox"
  checked={checkedMap.get(original)} //again, use a key
  onChange={() => handleCheckedChange(original)}
/>

const handleCheckedChange = row => {
  let modifiedMap = checkedMap
  modifiedMap.set(row, !checkedMap.get(row))
  setCheckedMap(modifiedMap)
}

使用复选框为表中的选定行添加选中和更改的属性的方法

1 个答案: