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??
}

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

是否有人使用行点击事件做类似的事情？

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

<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表属性具有onRowSelection属性。您可以使用它来定义和设置选择行时的自定义操作

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

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

如果失败，您的可点击字段构思应该有效。

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

2 个答案: