如何让PrimeReact DataTable新增行即时进入编辑状态？

要实现点击「添加行」后新行直接进入编辑状态，核心是利用PrimeReact DataTable的editingRows属性控制指定行的编辑状态，具体实现步骤如下：

1. 新增状态管理编辑行
   添加editingRows状态，跟踪处于编辑模式的行索引。

2. 修改添加行逻辑
   添加新行后，立即将新行的索引（数组第0位，因为新行被放在数组开头）加入editingRows。

3. 绑定editingRows到DataTable
   将editingRows传递给DataTable，让表格识别需要进入编辑状态的行。

4. 更新行编辑完成逻辑
   行编辑完成后，从editingRows中移除对应索引。

修改后的完整代码：

import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { data } from "../data";
import { useState } from "react";
import { InputText } from "primereact/inputtext";

export const Table = () => {
  const [users, setUsers] = useState(data);
  // 管理处于编辑状态的行索引
  const [editingRows, setEditingRows] = useState<number[]>([]);

  const handleAddRow = (): void => {
    const newRow: any = {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      freeTextField: "",
    };
    setUsers((prevList: any) => [newRow, ...prevList]);
    // 将新行（索引0）设为编辑状态
    setEditingRows([0]);
  };

  const onRowEditComplete = (e: any) => {
    const _users = [...users];
    const { newData, index } = e;

    _users[index] = newData;
    setUsers(_users);
    // 编辑完成后移除该行的编辑状态
    setEditingRows(editingRows.filter(i => i !== index));
  };

  const textEditor = (options: any) => {
    return (
      <InputText
        type="text"
        value={options.value}
        onChange={(e) => options.editorCallback(e.target.value)}
        // 自动聚焦输入框，实现键盘聚焦需求
        autoFocus
      />
    );
  };

  return (
    <div className="table-wrapper">
      <h2 className="table-name">PrimeReact data table</h2>
      <button onClick={handleAddRow}>add row</button>

      <DataTable
        value={users}
        tableStyle={{ minWidth: "50rem" }}
        editMode="row"
        onRowEditComplete={onRowEditComplete}
        // 绑定编辑行状态
        editingRows={editingRows}
      >
        <Column
          field="firstName"
          header="firstName"
          editor={(options) => textEditor(options)}
        ></Column>
        <Column
          field="lastName"
          header="lastName"
          editor={(options) => textEditor(options)}
        ></Column>
        <Column
          field="email"
          header="email"
          editor={(options) => textEditor(options)}
        ></Column>
        <Column
          field="phone"
          header="phone"
          editor={(options) => textEditor(options)}
        ></Column>
        <Column style={{ maxWidth: "15%" }} rowEditor>
          edit
        </Column>
      </DataTable>
    </div>
  );
};

额外说明 #

• 代码中给InputText添加了autoFocus属性，直接实现新增行后的键盘聚焦需求，无需额外处理。
• 如果需要支持同时编辑多行，可调整editingRows的更新逻辑，比如添加新行时保留原有编辑行，仅新增第0位索引。

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