如何在React中通过onClick从表行中插入数据

How can I insert data from table row by onClick in React

提问人:Rosen Petrov 提问时间:11/13/2023 更新时间:11/13/2023 访问量:15

问:

我是 React 的新手,我正在尝试从表格行中插入数据,但是当单击“添加表格行”按钮时,插入行中没有获取任何数据。 下面是一个示例代码:

应用.js:

const app = () => {
    const [tableRows, setTableRows] = useState([]);
    const [newTableRow, setNewTableRow] = useState([
        {
            rowCol1 = null,
            rowCol2 = null,
            rowCol3 = null,
            //...
        }
    ]);

    useEffect(() => {
        GetDataFromBackEndEndpoint().then(data => {setTableRows(data)})
    }, []);

    const createAction = useCallback(
        // empty object received from the table component
        (newItem)  => {
            CallBackEndEndpoint(newItem);
        });

    return (
        <>
            <h1>Table Rows Data</h1>
            <TableComponent
                data={tableRows}
            />
                
            <h1>Add new table row</h1>
            <TableComponent
                data={newTableRow}
                onCreate={createAction}
            />
        </>
    )
}

表组件.js:

const TableComponent = ({
    data,
    onCreate
}) => {
    const columns = useMemo(
        () => [
            { 
                // table rows data received from a backend service 
            },
            Cell: table => {
                return (
                    <button
                        onClick={() => onCreate(table.row.original)} // empty object
                    >
                        Add new table row
                    </button>
                );
            }
        ], [onCreate] 
    );

    // ...
}

我缺少什么来获取在“添加表格行”单元格中插入的值?

提前致谢!

ReactJS onclick

评论


答: 暂无答案