reactor---元数据驱动的表单
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {
metas:[
{type:"input",prop:"name",label:"name",defaultValue:"jy"}
],
model:{},
value: ''
};
this.state.metas.map((item)=>{
this.state.model[item.prop]=item.defaultValue?item.defaultValue:null;
console.log(this.state);
});
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
/*handleChange(prop,event) {
console.log("xxxxxxxxxxxxxxxxxxxxxx");
console.log(prop);
this.setState({
model:{
[prop]:event.target.value
}
});
}*/
handleChange(event) {
console.log("xxxxxxxxxxxxxxxxxxxxxx");
console.log(prop);
this.setState({
model:{
[event.target.name]:event.target.value
}
});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
console.log(this.state.model);
event.preventDefault();
}
render() {
var x=this.state.metas.map((item)=>
<label key={item.prop}>
{item.label}
//<input type="input" name={item.prop} value={this.state.model[item.prop]} onChange={(e)=>this.handleChange(item.prop,e)}></input>
<input type="input" name={item.prop} value={this.state.model[item.prop]} onChange={(e)=>this.handleChange(item.prop,e)}></input>
</label>
);
return (
<form onSubmit={this.handleSubmit}>
{x}
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
reactor---元数据驱动的表单的更多相关文章
- Template-Driven Forms 模板驱动式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) Reactive Forms - 响应式表单 ...
- 元数据管理—动态表单设计器在crudapi系统中完整实现
表单设计 在前面文章中,我们通过一系列案例介绍了表单设计的一些基本功能,表单设计起到非常重要作用,也是crudapi核心,所以本文会详细介绍表单设计中一些其它功能. 概要 表单字段column属性 列 ...
- angular表单的使用实例
原文 https://www.jianshu.com/p/da1fd5396798 大纲 1.模板驱动表单的创建 2.响应式表单的创建 3.模板驱动型表单的自定义指令 4.响应式表单的自定义指令 5. ...
- ng2响应式表单-翻译与概括官网REACTIVE FORMS页面
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...
- Angular2响应式表单
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...
- Angular Reactive Forms -- Model-Driven Forms响应式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档:https://v2.angul ...
- Angular2响应式表单-翻译与概括官网REACTIVE FORMS页面
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...
- angular表单经验分享
原文 https://www.jianshu.com/p/af359bd04f32 大纲 1.表单的名字不可以和传入的值的名字相同 2.在模板驱动表单的时候要使用angular表单的验证功能,需要将n ...
- angular表单知识点
原文 https://www.jianshu.com/p/c772d143e1fc 大纲 1.对表单的理解 2.模板驱动表单(Template Driven Forms) 3.响应式表单(Reacti ...
- angular4 Form表单相关
ng4中,有两种方式去声明一个表单 一:Template-Driven Forms - 模板驱动式表单 [引入FormsModule] 1.ngForm赋值 [可以方便的获取表单的值] <f ...
随机推荐
- buuctf——facebook1
分为注册和登陆两个页面 据大佬wp登陆页面又盲注,但我没测试 直接注册后登陆 注册后发现,会显示输入的url 根据目录扫描,发现robots.txt和flag.php robots.txt有源码备份 ...
- pikachu-搜索型注入 #手工注入
1.搜索型注入漏洞产生的原因: 在搭建网站的时候为了方便用户搜索该网站中的资源,程序员在写网站脚本的时候加入了搜索功能,但是忽略了对搜索变量的过滤,造成了搜索型注入漏洞,又称文本框注入. 2.搜索型注 ...
- 学好Linux必备知识
鸟哥的私房菜中提到学好Linux必备的几种技能: 1. 计算器概论不硬件相关知识: 因为既然想要走Linux这门路,信息相关癿基础技能也丌能没有啊! 所以先理觋一下基础癿硬件知识,丌用一定要全懂啦! ...
- /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found的解决办法
#############################BEGIN############################# strings /usr/lib64/libstdc++.so.6.0. ...
- 二分(求l-r中的平方数)
题目描述 多次查询[l,r]范围内的完全平方数个数 定义整数x为完全平方数当且仅当可以找到整数y使得y*y=x 输入描述:第一行一个数n表示查询次数之后n行每行两个数l,r输出描述:对于每个查询,输出 ...
- [总结]一些 DP 优化方法
目录 注意本文未完结 写在前面 矩阵快速幂优化 前缀和优化 two-pointer 优化 决策单调性对一类 1D/1D DP 的优化 \(w(i,j)\) 只含 \(i\) 和 \(j\) 的项--单 ...
- Mac 系统添加右键功能菜单--新建 office,文档等
Mac 系统自带右键功能键比较少,可以添加服务来拓展功能项.例如 Windows 系统右键可以新建 Word 文档,Excel 工作表等,Mac 默认没有,需要进行设置添加. 首先 F4 键进入 La ...
- The Captain 题解
20200216题目题解 这是一篇题解祭题解记,但一共就一道题目.(ROS菜大了) 题目如下: The Captain 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x ...
- wpf表单验证
在做表单的,需要对User提交数据做验证,wpf与silverlight 都提供自带的验证机制,但是只是验证,并不能在提交时提供详细的信息,此时可使用 依赖属性将错误信息整合进自定义错误集合中,即可在 ...
- 【摘录自MDN】预定义函数
JavaScript语言有好些个顶级的内建函数: eval() eval()方法会对一串字符串形式的JavaScript代码字符求值. uneval() uneval()方法创建的一个Object的 ...