如何在ReactJS开发的表格中添加编辑功能（已实现增删）

1. 新增编辑相关状态 #

在组件中添加两个核心状态，分别存储当前编辑的人员数据和编辑目标ID：

const [editFormData, setEditFormData] = useState({
  firstName: "",
  lastName: "",
  salary: "",
});
const [editContactId, setEditContactId] = useState(null);

2. 在表格行中添加编辑按钮并绑定触发逻辑 #

修改表格渲染代码，为每一行添加编辑按钮，点击时将当前行数据填充到编辑表单，并记录编辑目标ID：

{contacts.map((row) => (
  <TableRow key={row.id}>
    <TableCell>{row.firstName}</TableCell>
    <TableCell>{row.lastName}</TableCell>
    <TableCell>{row.salary}</TableCell>
    <TableCell>
      <button 
        onClick={() => {
          setEditContactId(row.id);
          setEditFormData({
            firstName: row.firstName,
            lastName: row.lastName,
            salary: row.salary,
          });
          // 打开编辑模态框，可根据你现有模态框逻辑调整，比如setShowEdit(true)
        }}
      >
        编辑
      </button>
    </TableCell>
    {/* 保留你原有的删除按钮 */}
  </TableRow>
))}

注意：不要用index作为key和行ID，改用每个联系人自带的row.id（你新增时用nanoid生成的），避免数据更新时出现渲染异常。

3. 实现编辑表单的变更与提交逻辑 #

编写编辑表单的输入变更处理和提交保存逻辑：

// 编辑表单输入变更处理
const handleEditFormChange = (event) => {
  event.preventDefault();
  const fieldName = event.target.name;
  const fieldValue = event.target.value;
  const newFormData = { ...editFormData };
  newFormData[fieldName] = fieldValue;
  setEditFormData(newFormData);
};

// 编辑提交保存处理
const handleEditFormSubmit = (event) => {
  event.preventDefault();
  const updatedContact = {
    id: editContactId,
    firstName: editFormData.firstName,
    lastName: editFormData.lastName,
    salary: editFormData.salary,
  };

  // 替换原数组中对应ID的联系人数据
  const updatedContacts = contacts.map((contact) => {
    if (contact.id === editContactId) {
      return updatedContact;
    }
    return contact;
  });

  setContacts(updatedContacts);
  setEditContactId(null); // 清除编辑状态
  setShowEdit(false); // 关闭编辑模态框，根据你的模态框状态调整
};

4. 渲染编辑表单（模态框内） #

复用类似新增表单的结构，在模态框中承载编辑表单，绑定编辑相关处理函数：

{editContactId && (
  <Modal show={showEdit} onHide={() => setShowEdit(false)}>
    <Modal.Header closeButton>
      <Modal.Title>编辑人员信息</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <form onSubmit={handleEditFormSubmit}>
        <div>
          <label>姓氏：</label>
          <input
            type="text"
            name="firstName"
            value={editFormData.firstName}
            onChange={handleEditFormChange}
            required
          />
        </div>
        <div>
          <label>名字：</label>
          <input
            type="text"
            name="lastName"
            value={editFormData.lastName}
            onChange={handleEditFormChange}
            required
          />
        </div>
        <div>
          <label>薪资：</label>
          <input
            type="text"
            name="salary"
            value={editFormData.salary}
            onChange={handleEditFormChange}
            required
          />
        </div>
        <button type="submit">保存修改</button>
      </form>
    </Modal.Body>
  </Modal>
)}

内容的提问来源于stack exchange，提问作者GO-SOSO-GO