如何在 reactjs 中将选中的复选框的值存储在数组中

Question

我正在使用来自“https://www.npmjs.com/package/react-checkbox-group”的 react-checkbox-group。我想在我的 Web 应用程序上添加 4 个复选框，每个复选框都有不同的值。然后我想将这些值存储在一个数组中。我在下面有我想要做的代码，但我不确定如何处理 'onChange' 事件。现在，数组 'baseballItems' 最初包含所有项目，我希望未选中的项目消失，但我愿意更改它，因此它是空的，并且选中的框正在填充数组。

`this.state = { baseballItems: ['bat','baseball', 'shoes', 'cap']}

...

<CheckboxGroup
checkboxDepth={2}
name="baseballItems"
value={this.state.baseballItems}
onChange={(event) => this.setState({ baseballItems: [event.target.isChecked]})}>
<label><Checkbox value="bat"/> bat</label>
<label><Checkbox value="baseball"/> baseball</label>
<label><Checkbox value="shoes"/> shoes</label>
<label><Checkbox value="cap"/> cap</label>
</CheckboxGroup>`

Answer 1

this.state = { baseballItems: ['bat','baseball', 'shoes', 'cap']}

...

<CheckboxGroup
  checkboxDepth={2}
  name="baseballItems"
  value={this.state.baseballItems}
  onChange={(items) => { this.setState({ baseballItems: items }); }}
>
    <label><Checkbox value="bat"/> bat</label>
    <label><Checkbox value="baseball"/> baseball</label>
    <label><Checkbox value="shoes"/> shoes</label>
    <label><Checkbox value="cap"/> cap</label>
</CheckboxGroup>

react-checkbox-groupreadme

中有类似的例子

如何在 reactjs 中将选中的复选框的值存储在数组中

How to store values of checked checkboxes in an array in reactjs

javascript

checkbox

reactjs