React-table select 没有复选框的行

Question

你好，我可以在 React-table 中 select 一行而不使用复选框吗？我只想点击我们想要 select 的行，然后获取来自 selected 行的数据，如果可行的话，你能给我举个例子吗

Answer 1

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

---

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

如果使用基于自定义 Hook 的现代 react-table 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 及更早版本

使用名为 getTrProps 的 <ReactTable /> 组件道具，它接受一个函数，该函数将接收有关该行的信息，并且应该 return 您希望 tr 元素接收的所有道具— 例如：

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

Answer 2

如果您使用的是 react-table v7.7.0 自定义 Hooks API，对于行级别，请单击以下步骤。

首先通过 useRowSelect 挂钩到 useTable，如下所示。

   const tableInstance = useTable(
    {
        columns,
        data,
    },
    useRowSelect);

那么您可以将 onClcik 添加到 tr

  <tbody>
    {rows.map((row, i) => {
      prepareRow(row)
      return (
        // <tr {...row.getRowProps()}>
        <tr {...row.getRowProps()} onClick={() => { console.log(' row click ', row)}} >
          {row.cells.map(cell => {
            return (
              <td {...cell.getCellProps()}>
                {cell.render('Cell')}
              </td>
            )
          })}
        </tr>
      )
    })}
  </tbody>

注意：如果useRowSelect没有传递给useTable。 onClick on <tr> 不会触发。同样的方式任何选项，如过滤或排序等。将 useFilters 或 useSortBy 等相应的钩子传递给 useTable 将使它起作用。