《PC端UI框架》Ant Design V4 中获取表单实例

1. 类组件：

   import React from 'react'
   import { Form, Input, Button } from 'antd';
   
   class ClassForm extends React.Component {
     // 创建表单实例
     formRef = React.createRef()
   
     handleSave = () => {
       this.formRef.current.submit()
     }
   
     render(){
       return (
         <Form ref={this.formRef}>
           <Form.Item name="title">
           	<Input />
           </Form.Item>
           <Form.Item>
              <Button type="primary" onClick={this.handleSave}> 保存</Button>
           </Form.Item>
           </Form>
       )
     }
   }
   
   export default ClassForm
   

2. 函数式组件：

   import { Form, Input, Button } from 'antd';
   
   const FuncForm = () => {
     const [form] = Form.useForm();
   
     const handleSave =  () => {
       form.submit()
     }
     return (
       <Form form={form} >
         <Form.Item name="title">
           <Input />
         </Form.Item>
         <Form.Item>
           <Button type="primary" onClick={handleSave}> 保存</Button>
         </Form.Item>
       </Form>
     )
   }
   
   export default FuncForm