如何在React中的复选框列表中添加选择所有复选框

由 发布于

这是我的初始状态

class RoomAmmenitiesForm extends Form {
  state = {
    data: {
      free_toiletries: false,
      blackout_drapes: false,
      safe_deposit_box: false,
      lcd_tv: false,
      free_wifi: false,
      pay_tv: false,
    }}

这是我的复选框处理函数

toggleCheckbox = (e) => {
    const AmmenityBoxName = e.target.name;
    this.setState((state) => ({
      data: {
        ...state.data,
        [AmmenityBoxName]: !state.data[AmmenityBoxName],
      },
    }));
  };

这是全选复选框的渲染代码

<div className="form-check">
            <label className="container">
              <input
                name= ?? <----------What name should i put here
                type="checkbox"
                checked={this.state.data}
                onChange={this.toggleAllCheckboxes}
                className="form-check-input"
              />
              <span className="checkmark"></span>
              Select All
            </label>
          </div>

我如何添加一个功能来处理所有复选框的选中和取消选中？请协助