如何在 React 中正确实现任务项的独立删除功能-js教程-PHP中文网

如何在 React 中正确实现任务项的独立删除功能

本文详解 react 中 todo 列表内单个任务删除失效的问题根源与解决方案，通过 usestate 管理任务状态、为每个删除按钮绑定唯一索引事件，避免误删全部任务或破坏组件响应性。

本文详解 react 中 todo 列表内单个任务删除失效的问题根源与解决方案，通过 usestate 管理任务状态、为每个删除按钮绑定唯一索引事件，避免误删全部任务或破坏组件响应性。

在 React 应用中实现 todo 列表时，一个常见误区是直接操作 DOM 并复用全局变量管理状态（如原代码中的 let taskArr = [] 和 document.createElement），这会导致状态与 UI 脱节、事件作用域混乱，最终出现“一点全删”“新增失效”等问题。

根本原因在于：

taskArr 是普通 JS 数组，不触发 React 重渲染；
handleDel 中遍历删除所有 .task-div，未区分点击目标；
deleteBtn.onclick = handleDel 绑定的是无参函数，无法识别具体是哪个任务被点击；
手动 appendChild/remove 违反 React 的声明式更新原则，导致状态与 DOM 不一致。

✅ 正确做法是：完全交由 React 管理状态与渲染，使用 useState 存储任务列表，并通过 map 动态生成带唯一 key 和上下文感知事件的元素。

以下是优化后的完整实现：

import React, { useState, useRef } from 'react';
import DelIcon from './assets/close-btn.png';
import './styling/home.scss';

function Task(todo) {
  this.todo = todo;
}

function Home() {
  const [tasks, setTasks] = useState([]);
  const inputRef = useRef(null);

  const handleDelete = (index) => {
    setTasks(prev => prev.filter((_, i) => i !== index));
    // 或等价写法：setTasks(prev => [...prev.slice(0, index), ...prev.slice(index + 1)]);
  };

  const handleClick = () => {
    const todoText = inputRef.current?.value.trim();
    if (!todoText) return; // 防空任务

    const newTask = new Task(todoText);
    setTasks(prev => [...prev, newTask]);
    inputRef.current.value = '';
  };

  return (
    <div id="home-container">
      <input type="text" ref="{inputRef}" maxlength="{40}" placeholder="输入新任务..."><button onclick="{handleClick}">Add</button>

      <div classname="task-container">
        {tasks.length === 0 ? (
          <p classname="empty-tip">暂无任务，添加一个试试吧！</p>
        ) : (
          tasks.map((task, index) => (
            <div classname="task-div" key="{index}">
              <p>{task.todo}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11404" title="Reactivation Specialist · 流失召回"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Reactivation Specialist · 流失召回" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11404" title="Reactivation Specialist · 流失召回" class="overflowclass">Reactivation Specialist · 流失召回</a>
													<p class="overflowclass">适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11404" title="Reactivation Specialist · 流失召回" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
              <button classname="delete-btn" onclick="{()"> handleDelete(index)}
                aria-label={`删除任务：${task.todo}`}
              >
                @@##@@
              </button>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

export default Home;

? 关键改进说明：

✅ 状态驱动渲染：tasks 作为受控状态，每次增删都调用 setTasks，确保 UI 自动同步；
✅ 精准删除逻辑：handleDelete(index) 接收当前项索引，仅过滤掉对应位置任务；
✅ 语义化事件绑定：onClick={() => handleDelete(index)} 在闭包中捕获当前 index，无需依赖 DOM 查询；
✅ 健壮性增强：增加空值校验、aria-label 可访问性支持、空状态提示；
❌ 移除危险操作：彻底弃用 document.createElement、appendChild、ref 操作 DOM 等命令式写法。

⚠️ 注意事项：

key 必须基于稳定标识（推荐使用 index 仅当列表无排序/过滤且不涉及动画）；更佳实践是为每条任务生成唯一 ID（如 Date.now() 或 uuid）；
避免在 map 内部定义函数（如 onClick={handleDelete.bind(null, index)}），推荐箭头函数闭包以提升性能与可读性；
若需支持编辑、完成状态等功能，应将 Task 改为普通对象或使用 useReducer 管理复杂状态。

遵循 React 的数据流原则——状态 → JSX → 用户交互 → 更新状态 → 重新渲染，即可构建出稳定、可维护、符合现代 React 最佳实践的 todo 应用。