如何解决列表内的React-admin创建对话框
是否有可能使用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>
);
解决方法
在同一页面上可以有两个Datagrids,但不能有两个列表。在react-admin中,列表的排序,过滤和分页使用URL作为状态,因此每条路由只能有一个列表。
对于您的用例,必须手动调用dataProvider.getList(),将结果放入<ListContext>
中,然后可以在其中使用第二个<Datagrid>
。它需要了解公共但未记录的react-admin API。您应该准备好挖掘react-admin的源代码以获取启发:
- useListController
- useReferenceManyFieldController
- 列表
- ListContext
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。