antd 函数组件_react函数组件中引用antd＜Form/＞组件demo

```xml

import React, { forwardRef, useEffect } from 'react';

import { Input, Select, Row, Col, Button, Form, Switch } from 'antd';

/**

* 函数组件中使用antd3

表单demo

*/

const { Option } = Select;

const FCForm = forwardRef(({ form, onSubmit }, ref) => {

useEffect(() => {

// 注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。

form.setFieldsValue({ username: '王雅丽', age: '26', bloodType: 'a', marry: false })

}, [])

const name = form.getFieldValue("username")

const val = form.getFieldsValue()

console.log('a---009', val, name)

const layout = {

labelCol: { span: 3 },

wrapperCol: { span: 21 },

};

const handleSubmit = e => {

e.preventDefault();

form.validateFields((err, values) => {

if (!err) {

console.log('Received values of form: ', values);

}

});

};

const { getFieldDecorator } = form;

return (

{...layout}

onSubmit={handleSubmit}

>

label="姓名"

>

{getFieldDecorator('username', {

rules: [{ required: true, message: 'Please input your username!' }],

})(

placeholder="Username"

/>,

)}

label="年龄"

>

{getFieldDecorator('age', {

rules: [{ required: true, message: 'Please input your age!' }],

})(

placeholder="age"

/>,

)}

label="血型"

>

{getFieldDecorator('bloodType', {

rules: [{ required: true, message: '请选择你的血型' }],

})(

A

B

O

,

)}

label="婚否"

>

{getFieldDecorator('marry', {

})(

,

)}

form.resetFields()}>

重置

提交

)

});

export default Form.create()(FCForm);