React Admin自定义数据网格展开行事件(v3.19)

Question

我正试图按照自定义数据网格示例使用react admin 3.19。https://marmelab.com/react-admin/doc/3.19/List.html#expand

我没办法让扩展程序工作。在下面的例子中，我自己手动添加了展开按钮，但找不到如何处理单击事件来显示展开的行。

const MyDatagridRow = ({ record, resource, id, onToggleItem, children, selected, selectable, basePath }) => (
<TableRow key={id}>
{/* first column: selection checkbox */}
<TableCell padding="none">
<Checkbox
disabled={false}
checked={selected}
onClick={event => onToggleItem(id, event)}
/>
</TableCell>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => console.log(record)}
>
{true ? <ArrowUpward /> : <ArrowDownward />}
</IconButton>
</TableCell>
{React.Children.map(children, field => (
<TableCell key={`${id}-${field.props.source}`}>
{React.cloneElement(field, {
record,
basePath,
resource,
})}
</TableCell>
))}
</TableRow>
);
const DatagridHeader = ({ children }) => (
<TableHead>
<TableRow>
<TableCell></TableCell>
{React.Children.map(children, field => (
<TableCell key={field.props.label}>
{field.props.label}
</TableCell>
))}
</TableRow>
</TableHead>
);
const MyDatagridBody = props => <DatagridBody {...props} row={<MyDatagridRow {...props} selectable={true} />} />;

那么，有没有办法手动触发呢？

Answer 1

您可以使用与react admin本身的实现相同的方法DatagridRow实现使用useExpanded，正如您所看到的，有一个操作toggleListItemExpande。因此，您可以使用资源和id来调度此操作。