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-group readme

中有类似的示例

如何在React.js的数组中存储选中的复选框的值

1 个答案: