reactjs - React-admin 在 List 中创建对话框

问题描述

是否可以使用 react-admin 创建以下场景？

使用 List+Datagrid 渲染项目
在每一行中也渲染一个按钮
用户点击按钮
显示包含来自另一个资源的另一个 List+Datagrid 的对话框

在我的实现中，当第一次单击按钮时，它会正确打开对话框并呈现answers. 但是，如果我更改排序或转到下一页，它也会影响呈现的数据网格questions。

原因是我猜当我在answers列表中应用排序等时，它会更改浏览器中的查询字符串，它也会产生影响questions。

是否可以在同一页面中有两个数据网格？（使用不同的资源和排序上下文等）。

我的暗示：


// render a dialog that contains answer for each questions
const ShowAnwersButton  = (props) => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <List
          resource="answers"
          basePath="/answers"
          filter={{ question_id: props.record.id }}
        >
          <MyDataGrid>
            <TextField source="id" />
            <DateField source="created_at" />
            <TextField source="name" />
          </MyDataGrid>
        </List>
      </Dialog>
      <Button
        variant={open ? "contained" : "outlined"}
        color="primary"
        onClick={(e) => setOpen(true)}
      >
        Answers
      </Button>
    </>
  );
};

// questions
export const QuestionsList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="id"/>
      <DateTime source="created_at" disabled />
      <BooleanField source="disabled" />
      <ShowAnwersButton source="dummy" />
    </EditableDatagrid>
  </List>
);

标签： reactjsreact-admin

同一页面中可以有两个 Datagrid，但不能有两个 List。在 react-admin 中，List 的排序、过滤和分页使用 URL 作为状态，因此每个路由只能有一个 List。

对于您的用例，您必须手动调用 dataProvider.getList() ，将结果放在 a<ListContext>中，然后您可以<Datagrid>在其中使用第二个。它需要了解公共但未记录的 react-admin API。您应该准备好在 react-admin 源代码中挖掘灵感：

使用列表控制器
使用ReferenceManyFieldController
列表
列表上下文

reactjs - React-admin 在 List 中创建对话框

问题描述

解决方案

推荐阅读