React+Ts+Antd实现Modal弹框中控制多个Tab页的

1、其实难点也就是多个Tab页，每个Tab页都有单独的Form表单，通过Modal的一个按钮如何控制，如何去校验多个表单。可以通过Ref实现此操作
首先创建空的Ref数组

const refArr: any = [];

渲染界面，循环时每次创建一个Ref，和表单。并且这个表单用当前创建的Ref作为唯一标识。

<Modal
      visible={true}
      title={renderModalTitle()}
      okText="Create"
      width="60%"
      onCancel={onCancel}
      onOk={() => submitForm()}
      className="story-table-add-modal">
      {renderModalForm()}
    </Modal>


  const renderModalForm = () => {
    return (
      <Tabs onEdit={editTab} type="editable-card" onChange={changeTabs}>
        {copyWorkLogArr?.map((workLog, index) => {
          refArr[workLog.projectName] = createRef();
          return (
            <TabPane tab={workLog.projectName} key={workLog.projectName} forceRender>
              <RenderWorkLogForm
                workLog={workLog}
                ref={refArr[workLog.projectName]}
                currentModalDisabledProjectArr={currentModalDisabledProjectArr}
              />
            </TabPane>
          );
        })}
      </Tabs>
    );
  };

2、表单子组件，将Form对象传递出去

let RenderWorkLogForm = (props: any, ref: any): any => {
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    getForm: () => {
      return form;
    },
  }));

  return (
    <Form form={form} layout="vertical" name={workLog.projectName}>
     
    </Form>
  );
};

RenderWorkLogForm = forwardRef(RenderWorkLogForm);

3、create的时候，也就是点击Modal弹窗确定的时候，调用子组件的方法获取每个ref的Form对象，通过Promise.all方法判断是否都通过了校验

 const submitForm = async () => {
    const formArr = [];
    for (const x in refArr) {
      const form = refArr[x].current.getForm();
      formArr.push(form.validateFields());
    }
    Promise.all(formArr)
      .then(result => onCreate(result))
      .catch(error => {
        console.log('error', error);
      });
  };