React使用useRef，提交兄弟组件的表单

需求：A、B为兄弟组件，A组件是一个没有提交按钮的表单，B组件有提交按钮，用来提交A组件的表单，且含有表单校验。使用ts。

解决方案：父组件使用useRef创建一个引用，保存在formRef中。将引用传给A组件中表单的ref属性，父组件通过formRef.current.validateFields()拿到表单的方法，并把function传给B组件的按钮。

import React, { useRef } from 'react';
interface FormData {
  // 在这里定义表单的数据类型
}
const Parent: React.FC = () => {
  const formRef = useRef<HTMLFormElement | null>(null);
  const handleFormSubmit = () => {
    if (formRef.current) {
      formRef.current.validateFields()
      .then((values:any) => {});
    }
  };
  return (
    <div>
      <A formRef={formRef} />
      <B onSubmitButtonClick={handleFormSubmit} />
    </div>
  );
};


interface AProps {
  formRef: React.MutableRefObject<HTMLFormElement | null>;
}
const A: React.FC<AProps> = ({ formRef }) => (
  <form ref={formRef}>
    {/* 表单的其他内容 */}
  </form>
);


interface BProps {
  onSubmitButtonClick: () => void;
}
const B: React.FC<BProps> = ({ onSubmitButtonClick }) => (
  <button onClick={onSubmitButtonClick}>提交</button>
);