React点击按钮删除列表元素：如何关联按钮对应项并修改状态

实现步骤 #

1. 渲染时传递任务ID给事件处理函数 #

不需要手动查找DOM关联li的key，直接在渲染按钮时通过箭头函数把当前遍历到的task.id传给deleteTask即可，调整后的列表渲染代码：

tasksFiltered.map((task) => {
  return (
    <li key={task.id} className={'todo-list__list-item'}>
      <span>{task.text}</span> 
      <button onClick={() => this.deleteTask(task.id)}>
        <FaTrashAlt />
      </button>
    </li>
  )
})

注：按钮不需要重复设置key属性，仅在列表根元素li上设置即可

2. 调整任务初始结构 #

你当前的任务对象缺少需求中需要修改的isCompleted属性，表单提交生成新任务时补充该字段：

{
  id: (Math.random() + Math.random()),
  text: this.state.inputText,
  isDeleted: false,
  isCompleted: false // 新增默认未完成状态
}

3. 实现deleteTask方法更新指定任务属性 #

更新React state中的数组元素需要遵循不可变更新原则，不能直接修改原数组，通过map遍历生成新数组，匹配到对应ID的任务时修改指定属性即可：

deleteTask = (taskId) => {
  // 可选：操作确认
  if (!window.confirm('确认标记该任务为已完成？')) return

  this.setState((prevState) => ({
    tasks: prevState.tasks.map((task) => {
      // 匹配到对应ID的任务，返回更新后的新对象
      if (task.id === taskId) {
        return {
          ...task, // 复制原有所有属性
          isCompleted: true // 覆盖需要修改的属性
        }
      }
      // 未匹配的任务直接返回原对象
      return task
    })
  }))
}

原理说明 #

• 渲染时通过闭包直接传递当前任务ID，比查找DOM关联数据更符合React的数据驱动思路，也更稳定
• 用map生成新数组、展开运算符复制对象的方式更新state，不会修改原state数据，能正常触发组件重渲染

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