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

【问题标题】：AOR: How to route to edit page when user click on a Datagrid row?AOR：当用户单击 Datagrid 行时如何路由到编辑页面？
【发布时间】：2017-08-07 16:00:06
【问题描述】：

背景

我正在使用 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>

句柄函数看起来像这样。

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>

【问题讨论】：

标签： admin-on-rest

【解决方案1】：

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

最初我错过了传递给 TableRow 的 selectable 属性。但是当我添加它时，选择事件被处理了。所以我就这样结束了。

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：