React待办列表问题：点击Completed按钮无法标记任意任务为已完成

你的问题出在两个核心点：

• 循环生成的所有<li>都用了同一个id="listItems"，HTML要求id必须唯一，所以getElementById只会返回第一个元素，自然只能修改第一项。
• 直接操作DOM不符合React的设计思路，React是状态驱动视图的，应该通过状态来管理任务的完成状态和选中状态。

下面是完整的修复方案：

1. 调整任务数据结构 #

给每个任务添加唯一ID和完成状态，避免用数组index当key（index会随列表变化，可能导致渲染异常）：

// 在Form组件的onSubmit函数中修改新增逻辑
const onSubmit = (e) => {
  e.preventDefault();
  if (!form.todo.trim()) return;
  const newTodo = {
    id: Date.now().toString(), // 用时间戳生成唯一ID
    todo: form.todo,
    completed: false // 新增完成状态标记
  };
  setCurrentList(prev => [...prev, newTodo]);
  setForm({ todo: '' });
};

2. 在父组件管理选中与完成状态 #

在Form组件中新增状态，处理任务选中和标记完成的逻辑：

import { useState } from 'react';

function Form() {
  const [form, setForm] = useState({ todo: '' });
  const [currentList, setCurrentList] = useState([]);
  const [selectedTaskId, setSelectedTaskId] = useState(null); // 记录选中的任务ID

  // 处理任务选中（点击切换选中状态）
  const handleTaskSelect = (taskId) => {
    setSelectedTaskId(prev => prev === taskId ? null : taskId);
  };

  // 标记选中任务为完成
  const handleMarkCompleted = () => {
    if (!selectedTaskId) return; // 未选中任务时不执行
    setCurrentList(prevList => prevList.map(task => 
      task.id === selectedTaskId ? {...task, completed: true} : task
    ));
    setSelectedTaskId(null); // 标记完成后清空选中状态
  };

  // 你的handleChange函数保持不变
  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  // ... 其他逻辑
}

3. 修改List组件，支持选中与样式渲染 #

把状态和事件函数传给List组件，根据任务的completed状态动态设置样式：

function List({ forCurrentList, selectedTaskId, onTaskSelect }) {
  return (
    <div>
      <ul>
        {forCurrentList.map((item) => (
          <li
            key={item.id} // 用唯一ID当key
            onClick={() => onTaskSelect(item.id)}
            style={{
              color: item.completed ? 'grey' : 'inherit',
              textDecoration: item.completed ? 'line-through' : 'none',
              backgroundColor: selectedTaskId === item.id ? '#f0f0f0' : 'transparent', // 选中项高亮提示
              cursor: 'pointer',
              padding: '8px',
              borderRadius: '4px'
            }}
          >
            {item.todo}
          </li>
        ))}
      </ul>
    </div>
  );
}

4. 更新父组件JSX #

将状态和函数传递给List组件，同时修改Completed按钮的点击事件：

// Form组件的return部分
return (
  <div id="container">
    <h1>todos</h1>
    <form onSubmit={onSubmit}>
      <input
        placeholder="What needs to be done?"
        name="todo"
        value={form.todo}
        onChange={handleChange}
      />
      <List
        forCurrentList={currentList}
        selectedTaskId={selectedTaskId}
        onTaskSelect={handleTaskSelect}
      />
      <div id="btns">
        <button type="submit">Add</button> {/* 给Add按钮加上submit类型 */}
        <button type="button">All</button>
        <button type="button">Active</button>
        <button type="button" onClick={handleMarkCompleted}>
          Completed
        </button>
      </div>
    </form>
  </div>
);

这样修改后，点击任意任务即可选中它（会显示灰色背景提示），点击Completed按钮就能将选中的任务标记为完成（变灰并添加删除线），完全遵循React的状态驱动逻辑，同时解决了重复id的问题。

内容的提问来源于stack exchange，提问作者Recep Çankaya