使用ReferenceField进行反应-管理-大容量选择

Question

在我们的应用程序中，我们尝试在ReferenceField中使用Datagrid来创建/修改/删除相关记录，如https://marmelab.com/blog/2018/07/09/react-admin-tutorials-form-for-related-records.html所示

本教程中显示的所有功能都运行良好，除了在最近的react更新中添加的批量操作之外。单击这些复选框将提供

Uncaught：_this.props.onToggleItem不是函数

我相信这是因为onToggleItem支柱通常是由List组件提供的，但是在这个应用程序中，Datagrid没有父列表组件。

在ReferenceManyField和Datagrid之间添加一个列表组件，允许在对样式进行一些更改后批量选择/删除，但是这会导致另一个问题:当前显示的页面(即记录1-10、11-20等)存储在存储中的每个资源中，因此有可能出现这样的情况:商店说我们在第2页上，而显示第2页是空的，因为只有足够多的相关项来填充一个页面。

我是不是漏掉了什么？还是目前无法在ReferenceManyField中批量选择？

export const NetworksShow = (props) => (
  <Show title={<NetworksTitle />} actions={<NetworksShowActions />} {...props}>

        <ReferenceManyField addLabel={false} target="ipid" reference="acl-network">
          <List style={{ margin: '0px -24px -16px -24px' }} {...props} actions={<NetworkACLCardActions ipid={props.id}/>} filter={{ ipid: _.has(props, 'id') ? props.id : undefined }}>
            <Datagrid hasBulkActions={true}>
              <ReferenceField label="Network" source="ipid" reference="networks">
                <TextField source="name" />
              </ReferenceField>
              <TextField label="URL" source="url" />
              <BWChip label="Action" source="wb" />
              <EditButton />
              <DeleteButton />
            </Datagrid>
          </List>
        </ReferenceManyField>
  </Show>
);

Answer 1

作为https://github.com/marmelab/react-admin/pull/2365的一个副作用，现在可以按照问题中描述的方式使用ReferenceManyField -> List -> Datagrid。

例如，我们现在正在做以下工作：

      <ReferenceManyField addLabel={false} target="groupid" reference="users">
        <List
          style={{ margin: '0px -24px -16px -24px' }}
          filter={{ groupid: id }}
          {...props}
        >
          <Datagrid hasBulkActions>
            <LinkField label="Name" source="name" />
            <LinkField label="Username" source="email" />
            <FlexibleBooleanField label="Email" source="allowemail" />
            <ACLChip label="User Access" source="aclid" />
          </Datagrid>
        </List>
      </ReferenceManyField>

大容量操作适用于上述操作，并且任何与分页有关的问题都可以避免，因为如果当前页面上没有任何内容出现，管理员现在检查和修改分页。

Answer 2

正如我从文档中了解到的，Datagrid只是一个迭代器“哑组件”。

它只是“显示”父元素--通常是列表(连接组件)--或者在您的例子中是ReferenceManyField -元素之前获取的内容。因此，我认为BulkActions只有在由List元素提供时才能发挥作用。

对于问题的第二部分，列表应该是顶级的，而不是在其他元素中，这就是为什么它破坏了您的分页。

Answer 3

我实现了"DumbList“，它接收来自父组件的数据，而不是加载它本身。这解决了问题：

import React from 'react';
import { ListController } from 'ra-core';
import { ListView } from 'ra-ui-materialui/esm/list/List';

export const DumbList = props =>
  <ListController {...props}>
    {controllerProps => {
      let { data } = props
      const ids = Object.keys(data || {})
      const total = ids.length
      return <ListView
        {...props}
        // This is important, otherwise bulkActionsToolbar ends up on very top of the page
        classes={{ card: 'relative' }}
        {...Object.assign(controllerProps, { data, ids, total })} />
    }}
  </ListController>