如何在React Js中使用多个复选框处理数据显示

import React, { Component } from 'react';

class CheckboxList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkboxes: [], // 存储选中的复选框的值
    };
  }

  handleCheckboxChange = (value) => {
    const { checkboxes } = this.state;
    const index = checkboxes.indexOf(value);

    if (index === -1) {
      // 如果复选框的值不在数组中，则添加到数组中
      checkboxes.push(value);
    } else {
      // 如果复选框的值已经在数组中，则从数组中移除
      checkboxes.splice(index, 1);
    }

    this.setState({ checkboxes });
  }

  handleSubmit = () => {
    // 处理选中的复选框的值，可以根据需要进行其他操作
    console.log(this.state.checkboxes);
  }

  render() {
    const data = ['选项1', '选项2', '选项3']; // 数据源

    return (
      <div>
        {data.map((item, index) => (
          <label key={index}>
            <input
              type="checkbox"
              value={item}
              checked={this.state.checkboxes.includes(item)}
              onChange={() => this.handleCheckboxChange(item)}
            />
            {item}
          </label>
        ))}
        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}

export default CheckboxList;