antd获取表单的所有数据

当我们使用antd的组件的form表单时，数据一般在form中的onFinish={onFinish}方法上可以拿到

1.  
   const Demo = () => {
2.  
   const onFinish = (values: any) => {
3.  
   console.log("表单数据",values);
4.  
   };

我们还可以使用 const [form] = Form.useForm() 拿到表单的数据

具体步骤

1.引入ant，拿到Form，定义hooks

1.  
   import form {Form} from 'antd'
2.  
    
3.  
   const [form] = Form.useForm()

2.在form表单写入form

1.  
   <Form
2.  
   name="nest-messages"
3.  
   onFinish={onFinish}
4.  
   form={form} //form
5.  
   >
6.  
   <Button type="primary" htmlType="submit" onclick={btnValue}>
7.  
   Submit
8.  
   </Button>
9.  
   </Form>

3.通过 form.getFieldValue 获取表单数据

1.  
   const btnValue = ()=>{
2.  
   console.log(form.getFieldsValue());
3.  
   }

打印出来就是我们表单所填写的数据啦

这篇好文章是转载于：学新通技术网