pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🐛[BUG] ProFormList嵌套两层以上,第二层使用actionRef.current?.getList();无法获取列表数据

Open tmxsgit opened this issue 3 years ago • 0 comments

提问前先看看:

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

image

🏞 期望结果

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]

🚑 其他信息

tmxsgit avatar Oct 31 '22 06:10 tmxsgit