反应管理员 |使用 ReferenceField 批量选择答案

【问题标题】：React-Admin | Bulk-Select with ReferenceField反应管理员 |使用 ReferenceField 批量选择
【发布时间】：2018-09-17 06:30:05
【问题描述】：

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

教程中显示的所有功能都运行良好，除了最近的 react-admin 更新中添加的批量操作。单击这些复选框会给出

未捕获的 TypeError：_this.props.onToggleItem 不是函数

我相信这是因为 onToggleItem 属性通常由 List 组件提供，但是在此应用程序中，Datagrid 没有父 List 组件。

在 ReferenceManyField 和 Datagrid 之间添加 List 组件允许在对样式进行一些更改后进行批量选择/删除，但这会导致另一个问题：当前显示的页面（即记录 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>
);

【问题讨论】：

标签： react-admin

【解决方案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>

批量操作适用于上述内容，并且可以避免任何分页问题，因为如果当前页面上没有任何内容，react-admin 现在会检查并修改分页。

【讨论】：

【解决方案2】：

正如我从documentation 中了解到的，Datagrid 只是一个迭代器“哑组件”。
它只是“显示”父元素 - 通常是列表（连接的组件）或在您的情况下是 ReferenceManyField - 元素先前已获取的东西。因此，我认为 BulkActions 只有在由 List 元素提供时才能发挥作用。

对于问题的第二部分，列表应该在顶层使用，而不是在其他元素中使用，这就是它破坏分页的原因。

【讨论】：

这是有道理的。无论如何，使用并不理想，因为它正在对中已经可用的数据进行自己的请求。我在想我最好的选择可能是编写一个组件来替换，它从获取数据道具，呈现批量操作工具栏，处理 onToggleItem 等。这听起来对吗？
是的，这听起来像是要走的路。 react-admin 的好处是，当某些东西不能按照你想要的方式工作时，你总是可以创建一个自定义组件来完全满足你的需要。

【解决方案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>

【讨论】：