如何控制从多选框到显示值的多选

// 多选框组件
class CheckboxGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValues: [], // 存储选中的值
    };
  }

  handleCheckboxChange = (value) => {
    const { selectedValues } = this.state;
    let updatedValues = [...selectedValues];

    // 判断当前值是否已选中，如果已选中则移除，否则添加到选中值数组中
    if (updatedValues.includes(value)) {
      updatedValues = updatedValues.filter((val) => val !== value);
    } else {
      updatedValues.push(value);
    }

    this.setState({ selectedValues: updatedValues });
  };

  render() {
    const { options } = this.props;
    const { selectedValues } = this.state;

    return (
      <div>
        {options.map((option) => (
          <label key={option.value}>
            <input
              type="checkbox"
              value={option.value}
              checked={selectedValues.includes(option.value)}
              onChange={() => this.handleCheckboxChange(option.value)}
            />
            {option.label}
          </label>
        ))}
      </div>
    );
  }
}

// 使用多选框组件
const options = [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' },
];

class App extends React.Component {
  render() {
    return (
      <div>
        <CheckboxGroup options={options} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));