如何解决react-admin:如何自定义批量操作
我想禁用一些由自定义BulkActionsButton创建的复选框。 这是一个简单的列表:
function CourseList(props): ReactElement {
return (
<List
{...props}
bulkActionButtons={<BulkActionButton />}
>
<Datagrid>
...some fields
</Datagrid>
</List>
);
}
和BulkActionButton
:
const BulkActionButton = ({
resource,selectedIds,}: BulkActionProps): ReactElement | null => {
const { data,loading } = useGetMany(
'shared/courses',selectedIds as Identifier[]
);
if (!data || loading) {
return null;
}
const someHasBeenPaid = data.some((course) => !!course?.invoiceDate);
return (
<Button
color="secondary"
disabled={someHasBeenPaid}
label={t('@app.manager.clientDepartment.invoiceCTA')}
/>
);
};
实际上,不应该首先检查具有invoiceDate
的记录。但是这些复选框是由react-admin在内部创建的,我找不到任何有关如何应用某些过滤器来启用/禁用复选框的文档,甚至没有可能。
解决方法
基于此文档https://marmelab.com/react-admin/List.html#isrowselectable,您可以在isRowSelectable
组件上使用Datagrid
道具来选择是否可以为批量操作选择一行。您可以访问那里的记录,以便根据数据做出决定:
export const RecordList = props => (
<List {...props}>
<Datagrid isRowSelectable={ record => !record.invoiceDate }>
...
</Datagrid>
</List>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。