Question

Internet上的所有示例都使用旧式> 组件，我找不到用于显示如何处理row_click事件的任何示例。我尝试了下面的示例，但是没有运气。不会被 const onRowClick =（状态，rowInfo，列，实例）=> {阻止。

        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

我认为您可以将其他道具传递给 getRowProps 函数。您只需要传递一个包含其他道具的对象。例如，您可以像这样传递样式对象

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

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

这里是Sandbox

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

希望这就是您想要的。

参考：ReactTable RowProperties

如何处理反应表上的点击行事件

1 个答案: