Как обработать событие строки клика на реагирующей таблице - PullRequest
Новая
       29

Как обработать событие строки клика на реагирующей таблице

2 голосов
/ 02 октября 2019

Все примеры в Интернете используют компонент старого стиля > , я не нашел ни одного примера, показывающего, как обрабатывать событие 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

1 Ответ

1 голос
/ 02 октября 2019

Я думаю, вы можете передать дополнительные реквизиты в функцию getRowProps в строке. Вам просто нужно передать объект, содержащий дополнительные реквизиты. Например, вы можете передать объект стиля как эту 

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

Так же, как вы можете передать onClick в функцию getRowProps . Вы можете передать объект строки в ваш обратный вызов onClick, чтобы получить данные строки

Вот Песочница

Я передал обратный вызов rowInfo для получения строки. Нажмите

Надеюсь, что это то, что вы хотите.

Ссылка: ReactTable RowProperties

...