表单提交

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

class MyForm extends React.Component {
        handleSubmit = () => {
                // 验证表单，会滚动到报错的地方，能通过values获取提交的表单值
                this.props.form.validateFieldsAndScroll((err, values) => {
                        if (err) {
                                console.log('表单验证失败');
                        } else {
                                console.log('表单数据:', values);
                        }
                });
        };

render() {
    //用于和表单进行双向绑定，这里是获取不到值的
	const { getFieldDecorator } = this.props.form;

	return (
		<Form>
			<Form.Item label="用户名">
				{getFieldDecorator('username', {
					rules: [{ required: true, message: '请输入用户名' }],
				})(<Input />)}
			</Form.Item>

			<Form.Item label="密码">
				{getFieldDecorator('password', {
					rules: [{ required: true, message: '请输入密码' }],
				})(<Input.Password />)}
			</Form.Item>

			<Button onClick={this.handleSubmit}>提交</Button>
		</Form>
	);
}
}

// 使用 Form.create() 来创建表单，确保 this.props.form 可用
export default Form.create()(MyForm);