React Hook encapsulates form form function components


import { Form, Input } from 'antd';
import React from 'react'

export default function postFormData() {
    const [form] = Form.useForm();
    const submit = () => {
        // 获取表单中的数据
        const formData = form.getFieldValue()
    }
    const backfill = () => {
        // 回填表单中的数据
        form.setFieldsValue({
            title: '张三',
            description: '简介'
        });
    }
    return (
        <div>
            <Form form={form} autoComplete="off"  >
                <Form.Item label="title" name="title" >
                    <Input />
                </Form.Item>
                <Form.Item label="description" name="description" >
                    <Input />
                </Form.Item>
                <Form.Item >
                    <Button type="primary" onClick={submit}>
                        获取
                    </Button>
                </Form.Item>
                <Form.Item >
                    <Button type="primary" onClick={backfill}>
                        回填
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}


Note: antd 4.20.0 and above

Guess you like

Origin blog.csdn.net/weixin_43695488/article/details/131717491