ReactJS列表复选框点击单个却全选，该如何修复？

问题根源是你用了单个checked状态变量，所有列表项共享同一状态，导致点击任意复选框时，所有项的状态都会同步切换。要实现单个复选框独立控制，需要给每个任务单独维护选中状态：

具体修复步骤 #

1. 替换全局状态为独立状态存储
   把单个checked变量改成对象（或数组），用任务id作为键来存储每个任务的选中状态：

   import { useState } from 'react';
   
   // 初始化状态为空对象，键是任务id，值是布尔值
   const [checkedIds, setCheckedIds] = useState({});
   

2. 修改点击事件处理器
   让checkHandler接收任务id，只切换对应任务的选中状态：

   const checkHandler = (taskId) => {
     setCheckedIds(prevState => ({
       ...prevState,
       // 切换当前任务的选中状态，未定义则默认取false
       [taskId]: !prevState[taskId]
     }));
   };
   

3. 更新渲染逻辑
   遍历任务时，根据当前任务id对应的状态来渲染复选框和文本样式：

   return (
     <ul>
       {props.taskInputs.map((e) => {
         // 获取当前任务的选中状态，默认未选中
         const isChecked = checkedIds[e.id] || false;
         return (
           <li key={e.id}>
             {e.id && !isChecked && (
               <ImCheckboxChecked className="checkbox" onClick={() => checkHandler(e.id)} />
             )}
             {e.id && isChecked && (
               <ImCheckboxUnchecked className="checkbox" onClick={() => checkHandler(e.id)} />
             )}
   
             <span
               className={isChecked ? "tasksDone" : "tasks"}
             >
               {e.taskInput}
             </span>
             <LuEdit
               className="edit-icon"
               onClick={() => props.editButtonHandler(e.id, e.taskInput)}
             />
             <BsTrash
               className="delete-icon"
               onClick={() => props.removeButtonHandler(e.id)}
             />
           </li>
         )
       })}
     </ul>
   )
   

补充说明 #

• 文本样式的判断我调整了顺序，根据tasksDone的命名，应该是选中时显示已完成样式，如果你的实际样式逻辑相反，把isChecked ? "tasksDone" : "tasks"改回原来的判断即可。
• 如果任务列表是从父组件传入的，也可以考虑把选中状态提升到父组件管理，具体取决于你的状态管理需求。

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