import React from 'react';
import { Form, Input, Select } from 'antd';
const { Option } = Select;
const FormItem = Form.Item;
class CustomForm extends React.Component {
render() {
const { formConfig } = this.props;
const { getFieldDecorator } = this.props.form;
return (
<Form>
{formConfig.map((item) => (
<FormItem key={item.id} label={item.label}>
{getFieldDecorator(item.name, {
initialValue: item.initialValue,
rules: item.rules,
})(
item.type === 'input' ? (
<Input placeholder={item.placeholder} />
) : (
<Select placeholder={item.placeholder}>
{item.options.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
)
)}
</FormItem>
))}
</Form>
);
}
}
export default Form.create()(CustomForm);
以上代码中,我们首先引入了 antd 中的 Form
、Input
和 Select
组件,然后我们将 Form.Item
重命名为 FormItem
,以方便我们在代码中使用。
接下来,我们定义了一个名为 CustomForm
的类组件,并在其 render
方法中使用了 Form
组件和 FormItem
组件来渲染表单。由于我们需要根据传入的配置项来渲染表单项,因此我们通过 map
方法将配置项数组中的每个配置项都渲染为一个 FormItem
组件。
在每个 FormItem
组件中,我们使用了 getFieldDecorator
方法来绑定表单项的值。其中,initialValue
属性表示表单项的初始值,rules
属性表示表单项校验规则。我们还需要根据表单项的类型来选择渲染 Input
组件或 Select
组件。
最后,我们调用了 Form.create()
方法来将 CustomForm
组件与 antd 的 Form
组件进行关联,以便我们可以使用 this.props.form
中提供的方法来操作表单。
具体使用:
import React from 'react';
import CustomForm from './CustomForm';
const formConfig = [
{
id: '1',
label: '姓名',
name: 'name',
type: 'input',
placeholder: '请输入姓名',
rules: [{ required: true, message: '请输入姓名' }],
},
{
id: '2',
label: '性别',
name: 'gender',
type: 'select',
placeholder: '请选择性别',
options: [
{ label: '男', value: 'male' },
{ label: '女', value: 'female' },
],
rules: [{ required: true, message: '请选择性别' }],
},
{
id: '3',
label: '年龄',
name: 'age',
type: 'input',
placeholder: '请输入年龄',
rules: [{ required: true, message: '请输入年龄' }],
},
];
const FormPage = () => {
return <CustomForm formConfig={formConfig} />;
};
export default FormPage;