React antd获取表单数据

函数组件获取表单数据

1.定义hook

const [form] = Form.useForm();

2.传参到Form form={form}

<Form form={form} size='middle'>
</From>

3.交互事件中获取表单数据

const formValues = form.getFieldsValue();//获取所有表单数据---多次试验如果表单未做任何改变，首次会获取到undefined

const value = form.getFieldsValue('name');//获取单个表单数据

代码示例：

import {
    Form,
    Input,
    Button
} from 'antd';
const FormTest = () => {
    function showFormData(index) {
        if (index === 0) {
            console.log(form.getFieldsValue());//获取所有表单数据
        }else if (index === 1) {
            console.log(form.getFieldsValue(['name','qq']));//获取部分表单数据
        }else if (index === 2) {
            console.log(form.getFieldValue('name')); //获取单个表单数据
        }

        //表单数据未做改变时会出现获取到的数据为 undefined
    }

    const [form] = Form.useForm();
    return (<>
        <div style={{ background: 'white', padding: 30 }}>
            <Form form={form} size='middle'>
                <Form.Item name='name' label="姓名">
                    <Input />
                </Form.Item>
                <Form.Item name='number' label="工号">
                    <Input />
                </Form.Item>
                <Form.Item name='qq' label="QQ">
                    <Input />
                </Form.Item>
            </Form>
            <Button style={{ marginLeft: 12,marginTop:12 }} type='primary'
                onClick={() => showFormData(0)}>
                获取所有表单数据
            </Button>
            <Button style={{ marginLeft: 12 }} type='primary'
                onClick={() => showFormData(1)}>
                获取部分表单数据
            </Button>
            <Button style={{ marginLeft: 12 }} type='primary'
                onClick={() => showFormData(2)}>
                获取单个表单数据
            </Button>
        </div>
    </>);
}
export default FormTest;