reactjs - 没有复选框的 react 表选择行

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 />名为 getTrProps 的组件 Prop 它接受一个函数，该函数将接收有关行的信息并应返回您想要的所有 Prop tr要接收的元素——例如:

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