【antd-pro】表单form 由页面其他按钮触发提交

用ref获取提交按钮的dom节点

createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。

import { createRef } from 'react';
import type { FormInstance } from 'antd';
const CreateSN: FC<OperationProps> = () => {
// 通过 ref 获取数据域
const submitRef = createRef<FormInstance>();
return (
  <div>
    <Form ref={submitRef}>
        <Form.Item >
           <Button type="primary" htmlType="submit">
                    保存
                  </Button>
         </Form.Item>
       </Form>
    <Button onClick={toAddSn}>其他按钮提交</Button>
  </div>
)
}

点击其他按钮form.submit() 触发表单提交方法。

调用 getFieldsValue(true) 返回表单所有值

  const toAddSn = () => {
    const formValue = submitRef?.current?.getFieldsValue(true) || {};
    form.submit(); 
    if (formValue && formValue.group) {
        // dosomething
    }
  };