react 管理员 |使用 ReferenceField 批量选择

Question

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

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

Uncaught TypeError: _this.props.onToggleItem is not a function

我认为这是因为 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>
);

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>

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