Ant Design框架下如何从父组件调用子组件内Form的onFinish方法

方案1：基于现有ref逻辑改造（最小改动） #

你丢失Ant Design Form的onFinish能力是因为手动调用自定义save方法没有触发Form实例的内置提交逻辑，Antd的Form实例自带submit()方法，调用后会自动执行校验、收集表单值、触发onFinish回调，只要把这个逻辑暴露给父组件即可。

修改后子组件代码 #

import { Form } from 'antd';
import { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 注意这里要先声明获取Antd Form的实例，是触发内置能力的前提
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    save() {
      // 直接调用Form实例的submit方法，自动触发校验、走onFinish逻辑
      form.submit();
    },
  }));

  function saveData(values) {
    // 这里会拿到校验通过后的表单值，直接写保存逻辑即可
    console.log('校验通过的表单值：', values);
  } 

  return (
    <Form
      form={form}
      {...formItemLayout}
      onFinish={saveData}
    >
      {/* 表单项内容 */}
    </Form>
  )
})

修改后父组件代码 #

要加空值判断，避免路由切换后子组件卸载时报空指针错误：

class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
   }
   render() {
       return(
           <button onClick={() => this.child.current?.save?.()}>Save</button>
           <Two ref={this.child} />
        )
    }
}

方案2：更符合React最佳实践的解耦方案（推荐） #

如果后续子组件数量增多、路由层级更深，ref转发会变得难以维护，可以用Context全局状态做事件通知，完全解耦父子组件：

• 父组件点击保存按钮时，修改Context里的triggerSave状态为true
• 每个子表单组件监听triggerSave变化，值为true时调用自身的form.submit()，处理完后通知父组件把triggerSave重置为false
• 不需要处理ref转发，新增子表单只要加对应监听逻辑即可，适配性更强

内容的提问来源于stack exchange，提问作者Ranu Vijay