如何根据ID仅为单个任务显示编辑表单？

当前你用一个布尔值editActive控制所有任务的编辑表单显示，所以点击任何一个任务的编辑图标时，所有表单都会同时显示。要解决这个问题，我们需要跟踪当前正在编辑的任务ID，而不是用一个全局的布尔值。

步骤1：修改App.js的状态管理 #

把原来的editActive布尔状态改成存储任务ID的状态，初始值设为null（表示没有任务在编辑）：

import { useState } from 'react'
import Tasks from "./components/Tasks";

function App() {
  // 用task ID代替布尔值，初始为null表示无任务编辑
  const [editingTaskId, setEditingTaskId] = useState(null)
  const [tasks, setTasks] = useState([
    {
      id: 1,
      title: 'Task',
      date: "12/03/2023 10:30",
      status: false,
      urgently: false,
    }
    // 其他任务...
  ])
  
  // 其他逻辑保持不变...
  
  return (
    <div className="container">
      {/* 传递编辑任务ID和对应的设置函数 */}
      <Tasks 
        tasks={tasks} 
        editingTaskId={editingTaskId} 
        setEditingTaskId={setEditingTaskId} 
      />
    </div>
  )
}

步骤2：更新Tasks组件传递新的props #

Tasks组件只需要把新的props传递给每个Task即可：

import Task from "./Task"

const Tasks = ({ tasks, editingTaskId, setEditingTaskId }) => {
  return (
    <div>
      {tasks.map((task) => (
        <Task 
          key={task.id} 
          task={task} 
          editingTaskId={editingTaskId} 
          setEditingTaskId={setEditingTaskId} 
        />
      ))}
    </div>
  )
}

步骤3：修改Task组件控制单个表单显示 #

在Task组件中，判断当前任务的ID是否等于editingTaskId来决定是否显示编辑表单；点击铅笔图标时，把当前任务的ID设置为editingTaskId：

import { useState } from 'react'
import { FaTimes, FaPencilAlt } from 'react-icons/fa'
import EditTask from './EditTask'

const Task = ({ task, editingTaskId, setEditingTaskId }) => {  
  // 其他逻辑保持不变...
  
  return (
    <>
      <p>
        {task.date} 
        <FaPencilAlt 
          style={{cursor:'pointer'}} 
          onClick={() => setEditingTaskId(task.id)} // 设置当前任务为编辑状态
        />
      </p>
      {/* 仅当当前任务ID等于编辑ID时显示表单 */}
      {editingTaskId === task.id && (
        <EditTask 
          onUpdate={onUpdate} 
          task={task} 
          setEditingTaskId={setEditingTaskId} 
        />
      )}
    </>
  )
}

步骤4：在EditTask组件中关闭编辑状态 #

当用户完成编辑（比如点击保存或取消按钮）时，需要把editingTaskId重置为null，关闭表单：

// EditTask.js示例代码
const EditTask = ({ task, onUpdate, setEditingTaskId }) => {
  const handleCancel = () => {
    setEditingTaskId(null) // 关闭编辑表单
  }
  
  const handleSave = () => {
    // 执行保存逻辑...
    onUpdate(/* 更新后的任务数据 */)
    setEditingTaskId(null) // 保存后关闭表单
  }
  
  return (
    <div className="edit-form">
      {/* 表单内容... */}
      <button onClick={handleSave}>保存</button>
      <button onClick={handleCancel}>取消</button>
    </div>
  )
}

这样修改后，点击某个任务的编辑图标时，只会显示该任务的编辑表单，其他任务不受影响。

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