reactjs - 如何在 React js 中制作可重用的表单
问题描述
我想通过从组件传递道具来动态显示表单。我怎样才能做到这一点?
编辑..
这是我的登录组件的代码,我正在使用动态表单组件来呈现表单:
import React, {Component} from 'react';
import DynamicForm from './DynamicForm';
class Login extends Component
{
constructor(props) {
super();
this.state = {
name: '',
email: '',
password: ''
}
}
onChangeHandler = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
onSubmitHandler = (e) => {
e.preventDefault();
const {fullname, email, password} = this.state;
this.setState({name: fullname, email: email, password: password})
}
render() {
let dynamicForm = [
{
name: 'fullname',
type: 'text',
label: 'Username'
}, {
name: 'email',
type: 'email',
label: 'Email'
}, {
name: 'password',
type: 'password',
label: 'Password'
}
]
return (
<div className="col-md-12">
<DynamicForm dynamicForm={dynamicForm}/>
</div>
);
}
}
export default Login;
这是动态表单组件:
import React from 'react';
const DynamicForm = (props) => {
return (
<form className='login'>
{props
.dynamicForm
.map((formAttr, index) => {
return (
<div key={index} className="col-md-3">
<label>
{formAttr.label}
</label>
<input type={formAttr.type} name={formAttr.name}/>
</div>
)
})}
</form>
);
}
export default DynamicForm;
解决方案
推荐阅读
- ios - AVPlayer 不断添加流而不是替换
- php - Codeigniter 3 将 docx 转换为 pdf php
- typescript - 如何在 gulp 中显示 webpack 错误
- mysql - 错误代码 1066 sqlstate 42000 不是唯一的表别名
- concurrency - Julia 中的任务和并发访问
- php - 限制在 woocommerce 产品类别页面中显示的产品数量
- c - 如何将结构成员与常量值进行比较?
- javascript - Javascript正则表达式模拟css'双栏'组合器
- sonos - Sonos 自检:ssl_validation test_support_secure_renegotiation
- angular - Webpack 和 Angular 的单元测试覆盖映射损坏了吗?