React.js中如何多选复选框？现有代码无法实现求排查

我检查了你的代码，问题出在选中状态的管理逻辑和复选框的 onChange 事件处理上，具体修复点如下：

1. 修正状态变量类型 #

原代码用单个字符串selectedOption存储选中值，仅支持单选场景。需要改为数组来保存多个选中项：

// 初始化状态为空数组
const [selectedOptions, setSelectedOptions] = useState([]);

2. 重构 onChange 事件处理函数 #

需要判断当前选项是否已在选中数组中，决定添加或移除该选项：

const handleCheckboxChange = (option) => {
  setSelectedOptions(prev => {
    if (prev.includes(option)) {
      // 已选中则移除
      return prev.filter(item => item !== option);
    } else {
      // 未选中则添加
      return [...prev, option];
    }
  });
};

3. 修正复选框的 checked 属性绑定 #

将原绑定逻辑selectedOption === option改为判断数组是否包含当前选项：

<input
  type="checkbox"
  value={option}
  checked={selectedOptions.includes(option)}
  onChange={() => handleCheckboxChange(option)}
/>

完整修复后的核心代码片段 #

import { useState } from "react";
import "./styles.css";

export default function App() {
  const options = ["Option 1", "Option 2", "Option 3", "Option 4"];
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleCheckboxChange = (option) => {
    setSelectedOptions((prev) =>
      prev.includes(option)
        ? prev.filter((item) => item !== option)
        : [...prev, option]
    );
  };

  return (
    <div className="App">
      <h1>多选复选框示例</h1>
      <div className="options">
        {options.map((option) => (
          <div key={option} className="option-item">
            <input
              type="checkbox"
              value={option}
              checked={selectedOptions.includes(option)}
              onChange={() => handleCheckboxChange(option)}
            />
            <label>{option}</label>
          </div>
        ))}
      </div>
      <p>已选中项：{selectedOptions.join(", ")}</p>
    </div>
  );
}

修改后即可正常实现多选功能：点击复选框可添加/移除对应选项，页面会实时展示已选中的内容。

内容的提问来源于stack exchange，提问作者Rohit Verma