使用React和Antd封装一个表单组件。
时间: 2024-04-08 07:29:08 浏览: 170
当然可以!下面是一个简单的例子,展示如何使用React和Antd封装一个表单组件:
```jsx
import React from 'react';
import { Form, Input, Button } from 'antd';
const CustomForm = ({ onSubmit }) => {
const onFinish = values => {
onSubmit(values);
};
return (
<Form onFinish={onFinish}>
<Form.Item
name="name"
label="Name"
rules={[
{
required: true,
message: 'Please input your name',
},
]}
>
<Input />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default CustomForm;
```
在这个例子中,我们使用了Antd提供的`Form`、`Input`和`Button`组件。表单组件接受一个`onSubmit` prop,用于处理表单提交事件。当用户提交表单时,我们调用`onFinish`函数,并将表单数据作为参数传递给它。
在`Form.Item`中,我们设置了一个必填的输入框,并为其提供了一个`name`属性和一个错误提示信息。
最后,我们导出了这个自定义表单组件,供其他地方使用。
你可以根据自己的需求进一步扩展和定制这个表单组件。希望这个例子能对你有所帮助!如果还有其他问题,请随时提问。
阅读全文