在react本机多选中设置选定项目

import React, { useState } from 'react';

const MultiSelect = ({ options }) => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    if (event.target.checked) {
      setSelectedItems([...selectedItems, value]);
    } else {
      setSelectedItems(selectedItems.filter((item) => item !== value));
    }
  };

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

export default MultiSelect;

import React from 'react';
import MultiSelect from './MultiSelect';

const App = () => {
  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  return (
    <div>
      <h1>Multi Select Example</h1>
      <MultiSelect options={options} />
    </div>
  );
};

export default App;