在前端开发中,获取组件的父表单通常是通过使用组件的父组件来实现的。在React中,可以使用this.props.form
来获取当前组件所在的表单。
以下是一个简单的示例代码:
import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';
class CustomInput extends Component {
handleSubmit = (e) => {
e.preventDefault();
const { form } = this.props;
form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
render() {
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Form onSubmit={this.handleSubmit}>
<Form.Item label="Username">
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})(<Input />)}
</Form.Item>
<Form.Item label="Password">
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your password!' }],
})(<Input.Password />)}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
}
}
export default Form.create()(CustomInput);
在上面的示例代码中,我们定义了一个名为CustomInput
的组件,并使用Form.create()
来包装它。这样,我们就可以在组件中通过this.props.form
来获取父表单的实例。在handleSubmit
方法中,我们可以使用form.validateFields()
来验证表单中的所有字段,并在验证通过后获取表单中的值。
需要注意的是,在使用Form.create()
包装组件时,需要将form
属性传递给组件。这个属性是通过Form.create()
自动生成的,并且包含了一些有用的方法和属性,例如getFieldDecorator
和validateFields
等。
领取专属 10元无门槛券
手把手带您无忧上云