reactjs - 如何处理react-table上的点击行事件

Question

互联网上的所有示例都使用旧式 > 组件，我找不到任何示例来展示如何处理 row_click 事件。 我尝试了下面的示例，但没有运气。 它不会被 const onRowClick = (state, rowInfo, column, instance) => { 停止，正如它应该的那样。

        import React from 'react'
        import {useTable, useSortBy, useTableState, usePagination} from 'react-table'

        function Table({getTrProps, columns, data}) {
            const tableState = useTableState({pageIndex: 2})
            const {
                getTableProps,
                getTrProps,
                ....
                state: [{pageIndex, pageSize}],
            } = useTable(
                {
                    getTrProps,
                    columns,
                    data,
                    state: tableState,
                },
                useSortBy,
                usePagination
            )



            // Render the UI for your table
            return (
                <>

                    <table {...getTableProps()}
                           className="table table-bordered"
                    >
                        <thead>
                        {headerGroups.map((headerGroup): any => (
                            <tr {...headerGroup.getHeaderGroupProps()}
                                className={`tx-10 tx-spacing-1 tx-color-03 tx-uppercase`}
                            >
                                {headerGroup.headers.map(column => (
                                    <th {...column.getHeaderProps(column.getSortByToggleProps())}>{column.render('Header')}
                                        <span>
                                        {(column as any).isSorted
                                            ? (column as any).isSortedDesc
                                                ? ' 🔽'
                                                : ' 🔼'
                                            : ''}
                                    </span>
                                    </th>
                                ))}
                            </tr>
                        ))}
                        </thead>
                    </table>

                </>
            )
        }

        function TransactionTable(props) {
            let data = props.data || []
            let filter = props.filter || {}
            ....
            const onRowClick = (state, rowInfo, column, instance) => {
                return {
                    onClick: e => {
                        debugger
                    }
                }
            }


            return (
                <div className={`card card-dashboard-table`}>
                    <div className="table-responsive">
                        <Table
                            getTrProps={onRowClick}
                            columns={filter.adjustParkingLot ? columns: withouParkingColumns}
                            data={data}/>
                    </div>
                </div>
            )
        }

        export default TransactionTable

Answer 1

我认为您可以将额外的 Prop 传递给行上的 getRowProps 函数。 您只需要传递一个包含附加 Prop 的对象。 例如，您可以将样式对象作为此传递

tr.getRowProps({ style: { color: 'blue' } })

同样的方式，您可以将 onClick 传递给 getRowProps 函数。 您可以将行对象传递给 onClick 回调以获取行数据

我通过 rowInfo 回调来获取行点击

希望这是你想要的。

引用号:ReactTable RowProperties