PWA Studio中useRef引用informed Form组件提交方法失效问题

• informed提供的<Form />是封装后的自定义React组件，没有默认通过forwardRef向外透传原生form DOM节点，也没有把内部提交方法挂在普通ref对应的实例上。直接给组件传ref属性，要么拿到的是null，要么拿到的实例根本不存在调用的submit()方法，自然触发不了提交。
• 原生HTML <form>标签的ref会直接指向真实DOM节点，DOM节点自带原生submit()方法，所以相同写法在原生标签上能正常运行，两者的ref绑定逻辑本质上完全不同。

informed本身提供了专门的formApiRef属性用来向外暴露表单操作API，替换普通ref绑定即可：

• 保留useRef创建ref实例的逻辑不变
• 给<Form />组件传递formApiRef属性，不要用默认的ref属性
• 调用API时使用库官方暴露的submitForm()方法，不要用原生DOM的submit()方法

对应实现代码：

const formRef = useRef(null);

const handleSubmit = () => {
  formRef.current && formRef.current.submitForm();
};

// 组件渲染部分
<Form formApiRef={formRef}>
  {/* 表单内容 */}
</Form>

如果使用的是适配PWA Studio的informed定制版本，方法名存在差异时可以直接打印formRef.current查看所有暴露的API，核心逻辑是不要用普通ref去接自定义组件的实例。

内容的提问来源于stack exchange，提问作者Luan Perosa