AOR:当用户单击数据网格行时，如何路由到编辑页面?

Question

Background

我正在使用 rest 数据网格组件上的管理员来呈现 REST 端点。喜欢这个：

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

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

问题

但是现在我正在尝试弄清楚如何在不使用 EditButton 的情况下，在行单击时将用户路由到编辑页面。

我的尝试

我的第一个想法是使用 rowOptiononCellClick。

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

其中句柄函数如下所示。

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

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

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

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

Answer 2

Material UI 表属性具有 onRowSelect 属性。您可以使用它来定义和设置选择行时的自定义操作

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

您可以在AOR数据网格的"选项"属性中访问这些属性。

如果失败，您的可点击字段想法应该可以工作。