AOR：当用户单击 Datagrid 行时如何路由到编辑页面？

Question

背景

我正在使用 Admin on rest Datagrid 组件呈现 REST 端点。像这样：

<Datagrid>
    <TextField source="name" />
    <TextField source="email" />
    <EditButton />        
</Datagrid>

EditButton 将用户路由到相应的编辑页面。一切都很好。

问题

但现在我正在尝试解决如何在不使用 EditButton 的情况下通过单击行将用户路由到编辑页面。

我的尝试

我的第一个想法是使用 rowOption onCellClick。

<Datagrid rowOptions={ {onClick: rowClick } } >
    <TextField source="name" />
    <TextField source="email" />
</Datagrid>

handle 函数看起来像这样。

const rowClick = (proxy, event) => {
    console.log(proxy, event);
    // how to get the resource id??
}

这会捕获行点击，并将事件数据记录到控制台。但据我所知，点击事件数据不包含有关该行的 REST 资源 ID 的信息。

有人用行点击事件做过类似的事情吗？

或者更好的方法是创建一个新组件（例如 ClickableField）来包装 TextField 并在此包装组件中添加点击事件处理程序？像这样：

<Datagrid>
    <ClickableField><TextField source="name" /></ClickableField>
    <ClickableField><TextField source="email" /></ClickableField>
</Datagrid>

Answer 1

Material UI table 属性有一个 onRowSelection 属性。您可以使用它来定义和设置选择行时的自定义操作

http://www.material-ui.com/#/components/table

您可以在 AOR 数据网格的 'options' 属性中访问这些属性。

如果这失败了，您的可点击字段想法应该可行。

Answer 2

正如 kunal pareek 所回答的那样，建议使用 onRowSelection 的公认答案有效。

最初我错过了传递给 TableRow 的 selectable 属性。但是当我添加它时，选择事件被处理了。因此我得到了这个。

<Datagrid rowOptions={{ selectable: true }} options={{ onRowSelection: rowClick }}>
    <TextField source="name" />
    <TextField source="email" />
</Datagrid>

AOR：当用户单击 Datagrid 行时如何路由到编辑页面？

AOR: How to route to edit page when user click on a Datagrid row?

admin-on-rest