响应表组件的onClick事件

Question

我正在使用'react-table'组件https://react-table.js.org

我想为一列添加点击事件(稍后我会打开一个显示基于此事件的信息的模态).

Answer 1

您将getTrProps添加到ReactTable,如下例所示:

const onRowClick = (state, rowInfo, column, instance) => {
    return {
        onClick: e => {
            console.log('A Td Element was clicked!')
            console.log('it produced this event:', e)
            console.log('It was in this column:', column)
            console.log('It was in this row:', rowInfo)
            console.log('It was in this table instance:', instance)
        }
    }
}


<ReactTable data={[]} columns={[]} getTrProps={onRowClick} />

Answer 2

在撰写本文时，React-Table 6.8.0：

'getTrProps' 属性中的 'column' 值始终未定义。

您必须改用“getTdProps”属性。