我尝试按照自定义datagrid示例使用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} />} />;
所以,有没有办法手动触发它?
1条答案
按热度按时间2q5ifsrm1#
您可以使用与react-admin本身的实现相同的方法。DatagridRow实现使用useExpanded,并且如您所见,存在操作toggleListItemExpand。因此,您可以仅使用资源和id来分派此操作。