```xml
import React, { forwardRef, useEffect } from 'react';
import { Input, Select, Row, Col, Button, Form, Switch } from 'antd';
/**
* 函数组件中使用antd3<form>表单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 (
<Form
{...layout}
onSubmit={handleSubmit}
>
<Row>
<Col span={8}>
<Form.Item
label="姓名"
>
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input
placeholder="Username"
/>,
)}
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="年龄"
>
{getFieldDecorator('age', {
rules: [{ required: true, message: 'Please input your age!' }],
})(
<Input
placeholder="age"
/>,
)}
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="血型"
>
{getFieldDecorator('bloodType', {
rules: [{ required: true, message: '请选择你的血型' }],
})(
<Select>
<Option key="a">A</Option>
<Option key="b">B</Option>
<Option key="o">O</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.Item
label="婚否"
>
{getFieldDecorator('marry', {
})(
<Switch />,
)}
</Form.Item>
</Col>
<Col span={8}>
<Form.Item>
<Button onClick={() => form.resetFields()}>
重置
</Butto`在这里插入代码片`n>
<Button style={{marginLeft:'20px'}} type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Col>
</Row>
</Form>
)
});
export default Form.create()(FCForm);