反应表选择行不带复选框 如果使用基于自定义Hooks API的现代react-table 如果使用react-table@v6和更早版本

编程问答 2022-08-14

问题描述

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

解决方法

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

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

您可以将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 />的{​​{1}}组件道具，该道具接受一个函数，该函数将接收有关行的信息，并应返回您希望getTrProps元素接收的所有道具，例如：> 

tr
react-tablereactjsreactjs