如何将所有复选框添加到react复选框列表中

Question

这是我的初始状态

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>

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

Answer 1

并且您的复选框应如下所示：

<input
   type="checkbox"
   checked={Object.keys(this.state.data).every(k => this.state.data[k])}
   onChange={e => this.toggleAllCheckboxes(e.target.checked)}
/>

demo