如何在react中将全选复选框添加到复选框列表中

import React, { Component } from 'react';

class CheckboxList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectAll: false,
      checkboxes: [
        { id: 1, label: 'Checkbox 1', checked: false },
        { id: 2, label: 'Checkbox 2', checked: false },
        { id: 3, label: 'Checkbox 3', checked: false },
        // 添加更多的复选框
      ]
    };
  }

  handleSelectAllChange = () => {
    const { checkboxes, selectAll } = this.state;
    const newCheckboxes = checkboxes.map(checkbox => ({
      ...checkbox,
      checked: !selectAll
    }));
    this.setState({
      selectAll: !selectAll,
      checkboxes: newCheckboxes
    });
  };

  handleCheckboxChange = (id) => {
    const { checkboxes } = this.state;
    const newCheckboxes = checkboxes.map(checkbox => {
      if (checkbox.id === id) {
        return {
          ...checkbox,
          checked: !checkbox.checked
        };
      }
      return checkbox;
    });
    this.setState({
      checkboxes: newCheckboxes
    });
  };

  render() {
    const { checkboxes, selectAll } = this.state;

    return (
      <div>
        <label>
          <input
            type="checkbox"
            checked={selectAll}
            onChange={this.handleSelectAllChange}
          />
          Select All
        </label>
        <ul>
          {checkboxes.map(checkbox => (
            <li key={checkbox.id}>
              <label>
                <input
                  type="checkbox"
                  checked={checkbox.checked}
                  onChange={() => this.handleCheckboxChange(checkbox.id)}
                />
                {checkbox.label}
              </label>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default CheckboxList;