如何在React中用useState实现全选复选框并为父元素添加类

核心思路 #

要实现顶部全选复选框的联动，关键是让每个待办项的「完成状态」可被批量修改，同时让全选框的状态与所有待办项的状态保持同步。具体步骤如下：

1. 调整待办项的数据结构，每个项包含 id（唯一标识）、text（内容）、completed（完成状态）三个属性；
2. 通过 every 方法判断所有待办项是否已完成，以此控制全选框的勾选状态；
3. 点击全选框时，批量更新所有待办项的 completed 状态。

完整代码示例 #

import { useState } from 'react';

function TodoApp() {
  // 初始化待办项数组，每个元素包含id、文本、完成状态
  const [todos, setTodos] = useState([
    { id: 1, text: '实现全选功能', completed: false },
    { id: 2, text: '优化样式', completed: false }
  ]);
  const [inputText, setInputText] = useState('');

  // 添加待办项（你已实现的逻辑，这里保持完整）
  const handleAddTodo = (e) => {
    e.preventDefault();
    if (!inputText.trim()) return;
    const newTodo = {
      id: Date.now(),
      text: inputText,
      completed: false
    };
    setTodos(prev => [...prev, newTodo]);
    setInputText('');
  };

  // 切换单个待办项的完成状态（你已实现的逻辑）
  const toggleSingleTodo = (todoId) => {
    setTodos(prevTodos => 
      prevTodos.map(todo => 
        todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  // 全选/取消全选逻辑
  const toggleAllTodos = () => {
    // 判断当前是否所有待办项都已完成
    const allCompleted = todos.every(todo => todo.completed);
    // 批量更新所有待办项的完成状态
    setTodos(prevTodos => 
      prevTodos.map(todo => ({ ...todo, completed: !allCompleted }))
    );
  };

  // 计算全选框的勾选状态：有数据且所有项都完成时勾选
  const isAllChecked = todos.length > 0 && todos.every(todo => todo.completed);

  return (
    <div className="todo-app">
      {/* 顶部全选复选框 */}
      <div className="toggle-all-wrap">
        <input
          type="checkbox"
          id="toggle-all"
          checked={isAllChecked}
          onChange={toggleAllTodos}
        />
        <label htmlFor="toggle-all">标记所有为完成</label>
      </div>

      {/* 添加待办项表单 */}
      <form onSubmit={handleAddTodo}>
        <input
          type="text"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          placeholder="输入待办内容..."
        />
        <button type="submit">添加</button>
      </form>

      {/* 待办列表渲染 */}
      <ul className="todo-list">
        {todos.map(todo => (
          <li 
            key={todo.id} 
            className={todo.completed ? 'completed' : ''}
          >
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleSingleTodo(todo.id)}
            />
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

关键细节说明 #

• 不可变状态更新：修改待办项数组时，始终使用 map 或扩展运算符生成新数组/新对象，避免直接修改原状态，确保 React 能检测到状态变化并重新渲染。
• 全选框状态联动：isAllChecked 变量通过 every 方法实时判断所有待办项的完成状态，保证全选框与列表状态同步。
• 空列表处理：判断全选状态时加上 todos.length > 0，避免空列表时全选框被错误勾选。

内容的提问来源于stack exchange，提问作者Alim Gölcük