目录
表单收集
表单收集有2种方式
- 不通过表单实例收集，直接在Form表单内添加提交按钮，但是要把按钮的类型设置为submit
- 通过表单实例进行收集，提交按钮放到那都可以。或者没按钮，直接通过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 (
<div>
<Form autoComplete="off" form={form} onFinish={onFinish}>
<Row justify="space-between">
<Col span={4}>
<Form.Item
label="姓名"
name="username"
rules={[
{
required: true,
message: '请输入姓名!',
},
]}
>
<Input style={
{ borderRadius: 10 }} />
</Form.Item>
</Col>
<Col span={4}>
<Form.Item
label="年龄"
name="age"
rules={[
{
required: true,
message: '请输入年龄!',
},
]}
>
<Input style={
{ borderRadius: 10 }} />
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="性别"
name="gender"
rules={[
{
required: true,
message: '请输入性别!',
},
]}
initialValue={1}
>
<Radio.Group>
<Radio value={1}>男</Radio>
<Radio value={0}>女</Radio>
</Radio.Group>
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="地址"
name="address"
rules={[
{
required: true,
message: '请选择地址!',
},
]}
>
<Select
options={[
{
value: 'hns',
label: '河南省',
},
{
value: 'shs',
label: '上海市',
},
]}
/>
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="生日"
name="birthday"
rules={[
{
required: true,
message: '请输入性别!',
},
]}
>
<DatePicker placeholder="日期选择" />
</Form.Item>
</Col>
<Col span={2}>
<Button htmlType="submit" type="primary">
提交
</Button>
</Col>
</Row>
</Form>
</div>
)
}效果如下
再说第二种，通过表单实例收集，主要用到表单实例化方法
代码如下
首先要知道，怎么获取表单实例化
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'),
// })
// }
// 表单提交2
const submitForm = () => {
console.log('收集的表单数据有', {
...form.getFieldsValue(),
birthday: form.getFieldValue('birthday').format('YYYY-MM-DD'),
})
}
return (
<div>
{/* <Form autoComplete="off" form={form} onFinish={onFinish}> */}
<Form autoComplete="off" form={form}>
<Row justify="space-between">
<Col span={4}>
<Form.Item
label="姓名"
name="username"
rules={[
{
required: true,
message: '请输入姓名!',
},
]}
>
<Input style={
{ borderRadius: 10 }} />
</Form.Item>
</Col>
<Col span={4}>
<Form.Item
label="年龄"
name="age"
rules={[
{
required: true,
message: '请输入年龄!',
},
]}
>
<Input style={
{ borderRadius: 10 }} />
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="性别"
name="gender"
rules={[
{
required: true,
message: '请输入性别!',
},
]}
initialValue={1}
>
<Radio.Group>
<Radio value={1}>男</Radio>
<Radio value={0}>女</Radio>
</Radio.Group>
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="地址"
name="address"
rules={[
{
required: true,
message: '请选择地址!',
},
]}
>
<Select
options={[
{
value: 'hns',
label: '河南省',
},
{
value: 'shs',
label: '上海市',
},
]}
/>
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="生日"
name="birthday"
rules={[
{
required: true,
message: '请输入性别!',
},
]}
>
<DatePicker placeholder="日期选择" />
</Form.Item>
</Col>
{/* <Col span={2}>
<Button htmlType="submit" type="primary">
提交
</Button>
</Col> */}
</Row>
</Form>
<Button type="primary" onClick={submitForm}>
提交
</Button>
</div>
)
}效果如下
回显表单
主要用到了表单实例化的方法
代码如下
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'),
// })
// }
// 表单提交2
const 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 (
<div>
{/* <Form autoComplete="off" form={form} onFinish={onFinish}> */}
<Form autoComplete="off" form={form}>
<Row justify="space-between">
<Col span={4}>
<Form.Item
label="姓名"
name="username"
rules={[
{
required: true,
message: '请输入姓名!',
},
]}
>
<Input style={
{ borderRadius: 10 }} />
</Form.Item>
</Col>
<Col span={4}>
<Form.Item
label="年龄"
name="age"
rules={[
{
required: true,
message: '请输入年龄!',
},
]}
>
<Input style={
{ borderRadius: 10 }} />
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="性别"
name="gender"
rules={[
{
required: true,
message: '请输入性别!',
},
]}
initialValue={1}
>
<Radio.Group>
<Radio value={1}>男</Radio>
<Radio value={0}>女</Radio>
</Radio.Group>
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="地址"
name="address"
rules={[
{
required: true,
message: '请选择地址!',
},
]}
>
<Select
options={[
{
value: 'hns',
label: '河南省',
},
{
value: 'shs',
label: '上海市',
},
]}
/>
</Form.Item>
</Col>
<Col span={3}>
<Form.Item
label="生日"
name="birthday"
rules={[
{
required: true,
message: '请输入性别!',
},
]}
>
<DatePicker placeholder="日期选择" />
</Form.Item>
</Col>
{/* <Col span={2}>
<Button htmlType="submit" type="primary">
提交
</Button>
</Col> */}
</Row>
</Form>
<Space>
<Button type="primary" onClick={submitForm}>
提交
</Button>
<Button type="primary" onClick={fillFormData}>
填充表单数据
</Button>
</Space>
</div>
)
}效果如下
