Ant Design 4表单

在antd 3 ,需要使用 Form.create 管理表单，相当于高级组件去 使用
需要使用

  <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </Form.Item>

表单方法调用
通过 Form.useForm 对表单数据域进行交互。
这样一来，在使用上就简洁多了

import React from 'react'
import { PageContainer } from "@ant-design/pro-layout";
import { Form, Input, Button, Checkbox } from 'antd';


const FormItem = Form.Item
export default () => {
    const [form] = Form.useForm();
    console.log("form", form)
    const onFinish = (values) => {
        console.log("values", values)
    }
    const onReset = () => {
        form.resetFields();
    };

    const onFill = () => {
        form.setFieldsValue({
            username: 'admin',
            password: '0000',
        });

    };
    return <PageContainer>
        <Form
            form={form}
            onFinish={onFinish}
        >
            <FormItem
                label="用户名"
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please input your username!',
                    },
                ]}
            >
                <Input />
            </FormItem>
            <FormItem
                label="密码"
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your password!',
                    },
                ]}
            >
                <Input />
            </FormItem>
            <FormItem>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
                <Button htmlType="button" onClick={onReset}>
                    Reset
                 </Button>
                <Button type="link" htmlType="button" onClick={onFill}>
                    Fill form
                 </Button>
            </FormItem>
        </Form>
    </PageContainer>
}