处理复选/取消复选多个复选框- React

import React, { Component } from 'react';

class CheckboxList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkboxes: [
        { id: 1, checked: false },
        { id: 2, checked: false },
        { id: 3, checked: false },
      ],
    };
  }

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

  render() {
    return (
      <div>
        {this.state.checkboxes.map((checkbox) => (
          <label key={checkbox.id}>
            <input
              type="checkbox"
              checked={checkbox.checked}
              onChange={() => this.handleCheckboxChange(checkbox.id)}
            />
            Checkbox {checkbox.id}
          </label>
        ))}
      </div>
    );
  }
}

export default CheckboxList;