单击带有反应表的单元格上的“编辑”按钮时如何使行可编辑

如何解决单击带有反应表的单元格上的“编辑”按钮时如何使行可编辑

我正在应用程序上使用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,defaultColumn,},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函数中，我将更改当前行或其单元格的状态，以便将该行中的单元格呈现为输入字段或其他内容。

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

您能为此建议吗？

解决方法

• 在要传递到react表的列数组中，您需要创建一个按钮，其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>
}