React 可以通过封装组件的方式来实现
动态表单。以下是一个简
单的例子：
1. 创建一个
表单组件，接收一个数组作为参数，数组中包含
表单项的配置信息，例如：
```
const formItems = [
{
label: 'Username',
name: 'username',
type: 'text',
required: true
},
{
label: 'Password',
name: 'password',
type: 'password',
required: true
},
{
label: 'Email',
name: 'email',
type: 'email',
required: false
},
// ...
];
```
2. 在
表单组件中，使用 map 方法遍历
表单项配置数组，根据每个配置项的信息生成对应的
表单控件。
```
function DynamicForm({ formItems }) {
const [formValues, setFormValues] = useState({});
function handleChange(e) {
setFormValues({
...formValues,
[e.target.name]: e.target.value
});
}
function handleSubmit(e) {
e.preventDefault();
// 处理
表单提交逻辑
}
return (
<form onSubmit={handleSubmit}>
{formItems.map(item => (
<div key={item.name}>
<label>{item.label}</label>
<input
type={item.type}
name={item.name}
value={formValues[item.name] || ''}
required={item.required}
onChange={handleChange}
/>
</div>
))}
<button type="submit">Submit</button>
</form>
);
}
```
3. 在父组件中调用
动态表单组件，并传入
表单项配置数组作为参数。
```
function App() {
const formItems = [
//
表单项配置信息
];
return (
<div className="App">
<DynamicForm formItems={formItems} />
</div>
);
}
```
以上就是一个简
单的
动态表单封装示例，可以根据需求调整
表单项配置信息和
表单控件的样式等。
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
https://www.npmjs.com/package/ant-customize-form
