React TodoList问题：点击单个任务复选框仅为该任务li添加completed类

问题核心：你用了一个全局的completed状态变量，所有任务的li都依赖这个变量判断是否添加completed类，所以点击任意复选框，所有任务都会跟着变。

修正方案 #

1. 把任务状态提升到父组件（App）

原有的todoData里已经有done字段记录完成状态，我们需要把它改成React状态，这样才能修改并触发组件更新：

const App = () => {
  // 用useState管理todo数据，支持修改更新
  const [todoData, setTodoData] = useState([
    { description: 'Completed task', created: 'created 17 seconds ago', done: true },
    { description: 'Editing task', created: 'created 5 minutes ago', done: false },
    { description: 'Active task', created: 'created 5 minutes ago', done: false },
  ]);

  // 定义切换任务完成状态的函数，传给子组件调用
  const toggleTodoDone = (index) => {
    setTodoData(prevData => {
      // 复制原数组，遵循React状态不可变原则
      const updatedTodos = [...prevData];
      // 切换对应下标的任务的done状态
      updatedTodos[index].done = !updatedTodos[index].done;
      return updatedTodos;
    });
  };

  // 把数据和切换函数传给TodoList组件
  return <TodoList todoData={todoData} toggleTodoDone={toggleTodoDone} />;
};

2. 修改TodoList组件，使用每个任务自己的状态

去掉TodoList里的completed状态，改用每个任务的done字段判断类名，点击复选框时调用父组件传的切换函数：

const TodoList = ({ todoData, toggleTodoDone }) => {
  return (
    <ul className="todo-list">
      {todoData.map((item, i) => {
        return (
          <li key={i} className={item.done ? 'completed' : ''}>
            <div className="view">
              <input 
                className="toggle" 
                type="checkbox" 
                checked={item.done} {/* 让复选框选中状态和数据同步 */}
                onChange={() => toggleTodoDone(i)} {/* 用onChange处理复选框状态变化，覆盖键盘+鼠标交互 */}
              />
              <label>
                <span className="description">{item.description}</span>
                <span className="created">{item.created}</span>
              </label>
              <button className="icon icon-edit"></button>
              <button className="icon icon-destroy"></button>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

关键细节说明 #

• 用onChange替代onClick：复选框支持键盘（空格）切换状态，onChange能覆盖所有交互场景，是表单控件状态变化的标准处理方式。
• 复制数组更新状态：React要求状态更新必须是不可变操作，直接修改原数组不会触发组件重渲染，所以要创建新数组再修改对应项。
• 绑定checked属性：确保复选框的视觉选中状态和数据里的done值一致，避免UI与数据不同步。

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