5

我正在react-table我的应用程序上使用交互式表格。

我的目标是制作一个在单击表格单元格中的按钮时每行可编辑的表格。

我设计了一个EditableCell像下面这样的。

import React, {useState} from "react";

export const EditableCell = ({
                                 value: initialValue,
                                 row: Row,
                                 column: {id, editable, state},
                                 isEditing,
                                 updateItem, // This is a custom function that we supplied to our table instance
                             }) => {
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);
    const {index} = Row;

    const onChange = e => {
        setValue(e.target.value);
    };

    // We'll only update the external data when the input is blurred
    const onBlur = () => {
        updateItem(index, id, value);
    }

    // If the initialValue is changed external, sync it up with our state
    React.useEffect(() => {
        setValue(initialValue)
    }, [initialValue]);

    /**
     * Event handler to make a row editable.
     * @param e
     */
    const setRowEditing = (e) => {
        // TODO
    };

    let retObj = null;
    if (isEditing && editable) {
        switch (id) {
            default:
                retObj = <input className="input-edit w-100" value={value} onChange={onChange} onBlur={onBlur}/>;
                break;
        }
    } else {
        switch (id) {
            case 'action_btn':
                retObj = <>
                    <button className="btn btn-sm btn-info btn-sm-td" onClick={setRowEditing}>{ isEditing? "Save" : "Edit"}</button>
                </>;
                break;
            default:
                retObj = <div>{value}</div>;
                break;
        }
    }
    return retObj;
}

export const defaultColumn = {
    Cell: EditableCell,
};

我的表的定义是：（我使用了我的 EditableCell 组件）

export default function Table({ columns, data, updateItem }) {

    // Use the useTable Hook to send the columns and data to build the table
    const {
        getTableProps, // table props from react-table
        getTableBodyProps, // table body props from react-table
        headerGroups, // headerGroups, if your table has groupings
        rows, // rows for the table based on the data passed
        prepareRow // Prepare the row (this function needs to be called for each row before getting the row props)
    } = useTable({
        columns,
        data,
        defaultColumn,
        updateItem,
    }, useBlockLayout, useRowState);

    /*
      Render the UI for your table
      - react-table doesn't have UI, it's headless. We just need to put the react-table props from the Hooks, and it will do its magic automatically
    */
    return (
        <table className="data-table" {...getTableProps()}>
            <thead>
            {headerGroups.map(headerGroup => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map(column => (
                        <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                    ))}
                </tr>
            ))}
            </thead>
            <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
                prepareRow(row);
                return (
                    <tr {...row.getRowProps()}>
                        {row.cells.map(cell => {
                            return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                        })}
                    </tr>
                );
            })}
            </tbody>
        </table>
    );
};

在setRowEditing函数中，我将更改当前行或其单元格的状态，以便将行中的单元格呈现为输入字段或其他内容。

但我不知道如何正确更改状态。

你能就此提出建议吗？

4

1 回答 1

4

在您传递给反应表的列数组中，您需要创建一个按钮，该按钮的onClick函数需要回调来编辑您的数据以添加一个isEditing: true，这样您就可以处理从表外部将行转换为编辑模式。不需要setRowEditing在可编辑的单元格中。

使用“isEditing”属性设置表数据的函数

const handleClickEditRow = (rowIndex) => {
    setTableData(prev => prev.map((r, index) => ({...r, isEditing: rowIndex === index})))
}

在你的专栏中

{
    accessor: '[editButton]',
    Cell: (cellObj) => <button onClick={() => handleClickEditRow(cellObj.row.index)}>Edit</button>
}
于 2020-11-17T20:18:15.283 回答