react 封装动态表单
时间: 2023-07-04 17:27:55 浏览: 67
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>
);
}
```
以上就是一个简单的动态表单封装示例,可以根据需求调整表单项配置信息和表单控件的样式等。