Prime React – Как я могу сделать вновь добавленные строки мгновенно редактируемыми?

Это возможно с некоторыми изменениями в приведенном выше коде.

1. Вам нужно ввести свойство dataKey в DataTable, это должно быть что-то уникальное для ваших данных и что-то, что вы можете добавить к данным при создании строки, я использовал id для демонстрационных целей.
2. Вам необходимо ввести реквизит onRowEditChange, чтобы таблица могла обрабатывать программную активацию.
3. Вам нужно ввести реквизит editingRows, который вы передадите в состоянии, которое будет указывать, какая строка находится в режиме редактирования. Это обрабатывается внутри таблицы с помощью реквизита dataKey, упомянутого в шаге 1.

См. приведенный ниже код, который поможет лучше понять вышеизложенные пункты.

* Я использовал некоторые жестко запрограммированные значения для состояния users, чтобы код мог работать. Не забудьте изменить значение ваших данных

export const Table = () => {
    const [users, setUsers] = useState([
        { id: 'john1', firstName: "John1", lastName: "Doe1", email: "[email protected]", phone: "1234567890", freeTextField: "Random1" },
        { id: '2', firstName: "John2", lastName: "Doe2", email: "[email protected]", phone: "2345678901", freeTextField: "Random2" },
        { id: '3', firstName: "John3", lastName: "Doe3", email: "[email protected]", phone: "3456789012", freeTextField: "Random3" },
        { id: '4', firstName: "John4", lastName: "Doe4", email: "[email protected]", phone: "4567890123", freeTextField: "Random4" },
        { id: '5', firstName: "John5", lastName: "Doe5", email: "[email protected]", phone: "5678901234", freeTextField: "Random5" },
    ]);
    const [editingRows, setEditingRows] = useState({});


    const handleAddRow = (): void => {
        const newRow: any = {
            id: users.length + 1,
            firstName: "",
            lastName: "",
            email: "",
            phone: "",
            freeTextField: "",
        };
        setUsers((prevList: any) => [newRow, ...prevList]);
        const val = {...{ [`${users.length + 1}`]: true }  }
        setEditingRows(val);
    };

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

        _users[index] = newData;

        setUsers(_users);
    };

    const textEditor = (options: any) => {
        return (
            <InputText
                type = "text"
                value = {options.value}
                onChange = {(e) => options.editorCallback(e.target.value)}
            />
        );
    };

    const onRowEditChange = (e:any) => {
        setEditingRows(e.data);
    }

    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"
                editingRows = {editingRows}
                dataKey = "id"
                onRowEditChange = {onRowEditChange}
                onRowEditComplete = {onRowEditComplete}
            >
                <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>
    );
};