React 实现待办事项删除功能详解

const deleteTodo = (index: number) => {
  const updatedList = [...list]; // 创建新数组副本（不可变更新）
  updatedList.splice(index, 1);   // 删除该索引处的 1 个元素
  setList(updatedList);
};

? 关键细节说明：

• ✅ 必须为 map 提供 key 属性（推荐使用 index 仅限临时/简单场景；若需支持拖拽、动态排序或存在重复值，应改用唯一 ID）；
• ✅ 删除按钮需置于列表项内部，确保语义清晰、操作可达；
• ✅ 建议添加 CSS 类或内联样式提升可访问性（如 hover 状态、焦点轮廓）；
• ❌ 避免在 onClick 中直接写 setList(list.filter(...))（虽可行，但对长列表性能略低，且不易复用逻辑）。

? 完整整合示例（精简版）

将上述逻辑嵌入原代码后，关键片段如下：

// ... 其他 useState 和事件处理保持不变

const deleteTodo = (index: number) => {
  setList(prev => prev.filter((_, i) => i !== index)); // 替代 splice 的函数式写法（同样推荐）
};

return (
  

    

      My Todo list
    

    {list.length === 0 ? (
      
No tasks yet. Add one above!
    ) : (
      list.map((el, index) => (
        

          {el}
           deleteTodo(index)}
            style={{
              backgroundColor: "#ff4757",
              color: "white",
              border: "none",
              borderRadius: "4px",
              padding: "4px 12px",
              cursor: "pointer",
              fontSize: "14px"
            }}
          >
            Delete
          
        
      ))
    )}

    {/* 输入框与添加按钮保持不变 */}
    
    
      Add
    
  
);

? 总结与最佳实践

• 删除本质是「生成新数组 → 替换旧状态」，始终遵循不可变数据原则；
• filter() 比 splice() 更具声明性，且天然避免索引错位风险（尤其在并发删除时）；
• 生产环境建议为每项分配唯一 id（如 crypto.randomUUID()），用 id 删除而非 index，以规避重排导致的误删；
• 可进一步增强体验：添加删除确认弹窗、动画过渡、空状态提示等。

至此，你的 React Todo 应用已具备完整的增删能力，逻辑清晰、可维护性强，符合现代 React 开发规范。

今天关于《React 实现待办事项删除功能详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！