要使用Ant Design的Form.create方法,首先需要导入Form和FormItem组件。然后在Form.create方法中传入一个组件作为参数,这个组件可以是一个类组件或者函数组件。在传入的组件中,可以通过this.props.form获取Form的实例,并使用Form提供的方法来处理表单数据。
以下是一个示例代码:
import React from 'react';
import { Form, Input, Button } from 'antd';
class MyForm extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
render() {
const { getFieldDecorator } = this.props.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>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
}
}
const WrappedMyForm = Form.create({ name: 'my_form' })(MyForm);
export default WrappedMyForm;
在这个示例中,我们创建了一个MyForm组件,并使用Form.create方法将其包装成一个高阶组件WrappedMyForm。在MyForm组件中,通过this.props.form来获取Form实例,并使用getFieldDecorator方法来创建表单项。handleSubmit方法用来处理表单提交事件,通过validateFields方法来验证表单数据。最后通过Form.create方法将MyForm包装成WrappedMyForm并导出。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。