反应表选择没有复选框的行

Question

您好，我可以在不使用复选框的情况下在 React-table 中选择一行吗，我只想单击我们要选择的行，然后从所选行中获取数据，如果可行，您能否提供一个示例

Answer 1

编辑：这个答案现在已经过时，需要修改。如果您在 v7 中使用 React-Table，请查阅官方文档以获取有关如何使表格中的行可点击的示例。

您需要为 Row 组件注册一个事件侦听器，它将检测点击。调用侦听器时，您将能够更改应用程序的状态以记录该用户所做的选择，这反过来又可用于更改表的外观，以便用户可以“看到”选择的发生（例如更改行的背景颜色）。

如果使用react-table基于自定义 Hooks API 的现代

您可以将onClick处理程序传递给row.getRowProps函数以将其添加到所有tr元素。您还可以使用row.setState将行设置为selected.

<tbody {...getTableBodyProps()}>
    {rows.map((row, i) => {
        return (
            <tr {...row.getRowProps({
                onClick: () => { /* select the row here */ } 
            })}>
                {row.cells.map(cell => {
                    return /* your cell code */
                })}
            </tr>
        )
    })}
</tbody>

如果使用react-table@v6和更早

使用<ReactTable />被调用的组件 propgetTrProps接受一个函数，该函数将接收有关该行的信息，并应返回您希望tr元素接收的所有道具- 例如：

<ReactTable
    getTrProps={(_, row) => {
        return {
            onClick: () => { /* select your row here */ }
        };
    }}
/>