React Todo复选框问题：点击单个复选框全选所有列表项

嘿，这个问题我之前也踩过坑！核心原因应该是你给所有复选框绑定了同一个全局状态，而不是让每个待办项自己管理完成状态，咱们一步步来修复：

1. 先检查你的待办项数据结构 #

确保每个todo对象都自带completed（或类似字段）来记录自身的完成状态，而不是用单独一个isChecked变量控制所有项：

// 正确的初始状态示例
const [todos, setTodos] = useState([
  { id: 1, text: "完成React学习", completed: false },
  { id: 2, text: "写项目Demo", completed: false }
]);

2. 修改复选框的渲染逻辑 #

每个复选框的checked属性要对应当前todo的completed值，点击时触发针对单个todo的状态更新：

{todos.map((todo) => (
  <div key={todo.id} className={`todo-item ${todo.completed ? "completed-style" : ""}`}>
    <input
      type="checkbox"
      checked={todo.completed}
      onChange={() => toggleTodoStatus(todo.id)}
    />
    <span>{todo.text}</span>
    <button onClick={() => deleteTodo(todo.id)}>删除</button>
  </div>
))}

3. 实现单个待办项的状态切换函数 #

这里不能用删除功能的filter逻辑（filter是用来移除元素的），咱们用map遍历数组，找到对应id的todo并翻转它的completed状态：

const toggleTodoStatus = (todoId) => {
  setTodos((prevTodos) =>
    prevTodos.map((todo) =>
      todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
    )
  );
};

原理很简单：map会返回一个新数组，只有匹配id的todo会被复制并修改completed状态，其他项保持原样，这样就只会更新单个待办项的状态啦。

4. 样式匹配逻辑 #

刚才渲染时已经根据todo.completed给对应项加了样式类，你只需要在CSS里定义这个类的效果就行：

.completed-style {
  text-decoration: line-through;
  color: #888;
}

为啥之前复用filter没用？因为filter的作用是筛选/移除数组元素（比如删除待办项时过滤掉对应id的项），而咱们现在需要的是修改数组中某个元素的属性，所以map才是正确的选择~

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