antd的Form组件，收集值与回显小汇总

目录

表单收集

 回显表单

表单收集

表单收集有2种方式

1. 不通过表单实例收集，直接在Form表单内添加提交按钮，但是要把按钮的类型设置为submit
2. 通过表单实例进行收集，提交按钮放到那都可以。或者没按钮，直接通过Form实例化调用submit方法

先说第一种，具体代码如下

import React from 'react'
import { Form, Input, Radio, Select, Row, Col, DatePicker, Button } from 'antd'export default function Jjj() {// 表单实例const [form] = Form.useForm()// 表单提交const onFinish = (value) => {console.log('收集的表单数据有', {...value,birthday: value['birthday'].format('YYYY-MM-DD'),})}return (
{ borderRadius: 10 }} />{ borderRadius: 10 }} />男女提交
)
}

效果如下

再说第二种，通过表单实例收集，主要用到表单实例化方法

代码如下

首先要知道，怎么获取表单实例化

import React from 'react'
import { Form, Input, Radio, Select, Row, Col, DatePicker, Button } from 'antd'export default function Jjj() {// 表单实例const [form] = Form.useForm()// 表单提交1//   const onFinish = (value) => {//     console.log('收集的表单数据有', {//       ...value,//       birthday: value['birthday'].format('YYYY-MM-DD'),//     })//   }// 表单提交2const submitForm = () => {console.log('收集的表单数据有', {...form.getFieldsValue(),birthday: form.getFieldValue('birthday').format('YYYY-MM-DD'),})}return ({/* 
 */}{ borderRadius: 10 }} />{ borderRadius: 10 }} />男女{/* 提交 */}
提交)
}

 效果如下

 回显表单

主要用到了表单实例化的方法

代码如下

import React from 'react'
import {Form,Input,Radio,Select,Row,Col,DatePicker,Button,Space,
} from 'antd'
import moment from 'moment'export default function Jjj() {// 表单实例const [form] = Form.useForm()// 表单提交1//   const onFinish = (value) => {//     console.log('收集的表单数据有', {//       ...value,//       birthday: value['birthday'].format('YYYY-MM-DD'),//     })//   }// 表单提交2const submitForm = () => {console.log('收集的表单数据有', {...form.getFieldsValue(),birthday: form.getFieldValue('birthday').format('YYYY-MM-DD'),})}// 填充表单数据(模拟后台数据回填)const fillFormData = () => {// 假装这是后台返回的数据const formData = {username: '张三',age: 24,gender: 1,address: 'hns',birthday: moment('1998-08-08', 'YYYY-MM-DD'),}setTimeout(() => {form.setFieldsValue(formData)}, 2000)}return ({/* 
 */}{ borderRadius: 10 }} />{ borderRadius: 10 }} />男女{/* 提交 */}
提交填充表单数据)
}

效果如下

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！