如何解决是否可以在数据网格中只允许一个展开的行?
我想一次只允许我的用户展开一行。使用默认的 Datagrid,您可以根据需要扩展任意数量的行,增加垂直空间,同时增加屏幕上显示的数据量。
假设没有默认设置(我还没有找到),我认为实现这一点的唯一方法是手动调整 Redux 存储中的状态。我可以在这里看到 redux 存储中的状态:
我在 Redux 方面非常薄弱,我不确定确保“扩展”数组中只有一个值的最佳方法。有没有人有任何想法让我尝试?提前致谢!
解决方法
我通过反复试验找到解决方案的方式让自己感到惊讶。基本上我使用 useSelector 来获取我的列表中展开的内容的状态,然后设置一个效果来观察该数组何时发生变化。如果数组大于一个,我只需使用 useDispatch 切换数组中的第一项。
代码片段:
const expanded = useSelector(state =>
state.admin.resources.PackageInfo.list.expanded
);
const dispatch = useDispatch();
useEffect(() => {
if(expanded.length > 1)
dispatch(toggleListItemExpand('PackageInfo',expanded[0]));
},[expanded]);
我很想得到关于此的任何反馈,我不确定定制发货到商店的副作用或后果是什么。我想明天我会试着把它扩展成一个可重用的钩子,我可以在我的所有列表中使用它。
编辑:
我确实把它移到了一个钩子里,现在让它在多个列表中工作。这是完整的钩子:
import { useEffect } from "react";
import { useSelector,useDispatch } from "react-redux";
import { toggleListItemExpand } from "react-admin";
const useExpandOnlyOne = (resource) => {
const expanded = useSelector(
(state) => state.admin.resources[resource].list.expanded
);
const dispatch = useDispatch();
useEffect(() => {
if (expanded.length > 1)
dispatch(toggleListItemExpand(resource,expanded[0]));
},[expanded]);
};
export default useExpandOnlyOne;
我只是在我的顶级列表中像这样调用它:
const PackageList = (props) => {
useExpandOnlyOne(props.resource);
....
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。