pro-components
pro-components copied to clipboard
🐛[BUG] ProFormList嵌套两层以上,第二层使用actionRef.current?.getList();无法获取列表数据
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
🐛 bug 描述
ProFormList嵌套两层以上,第一层使用actionRef.current?.getList();可以获取列表数据,第二层使用actionRef.current?.getList();无法获取列表数据
📷 复现步骤
复现代码:https://codesandbox.io/s/proform-list-forked-2u6xt9?file=/App.tsx:0-1484

🏞 期望结果
ProFormList嵌套两层以上,第一层使用actionRef.current?.getList();可以获取列表数据,第二层使用actionRef.current?.getList();也能获取列表数据
💻 复现代码
import React, { useRef } from "react";
import ProForm, {
ProFormList,
ProFormText,
ProFormInstance
} from "@ant-design/pro-form";
const Demo = () => {
const ProFormListRef1 = useRef();
const actionGuard1 = {
beforeAddRow: async () => {
const row = ProFormListRef1.current?.getList();
console.log("row1", row);
return new Promise((resolve) => {
resolve(true);
});
}
};
const ProFormListRef2 = useRef();
const actionGuard2 = {
beforeAddRow: async () => {
const row = ProFormListRef2.current?.getList();
console.log("row2", row);
return new Promise((resolve) => {
resolve(true);
});
}
};
return (
<ProForm>
<ProFormList
name="lv1"
label="第一层"
actionRef={ProFormListRef1}
actionGuard={actionGuard1}
>
{(_, idxLv1) => {
return (
<>
<ProFormText name="lv1Name" label="姓名1" />
<ProFormList
style={{ paddingLeft: "50px" }}
name="lv2"
label="第二层"
actionRef={ProFormListRef2}
actionGuard={actionGuard2}
>
{(f, idxLv2, action) => {
return <ProFormText name="lv2Name" label="姓名2" />;
}}
</ProFormList>
<hr />
</>
);
}}
</ProFormList>
</ProForm>
);
};
export default Demo;
© 版本信息
@ant-design/pro-form版本: [2.2.14] umi 版本: 3.5.25 浏览器环境 开发环境 [windows10]