React可控组件与不可控组件
一、不可控组件
1.简介
2.代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>琛ㄥ崟璇﹁В</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
// var MyForm = React.createClass({
// render: function () {
// return <input
// type="text" defaultValue="Hello World!" />;
// }
// });
var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
var helloTo = React.findDOMNode(this.refs.helloTo).value;
alert(helloTo);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<input
ref="helloTo"
type="text"
defaultValue="Hello World!" />
<br />
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
二、可控组件
1.简介
2.代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var MyForm = React.createClass({
getInitialState: function () {
return {
helloTo: "Hello World!"
};
},
handleChange: function (event) {
this.setState({
helloTo: event.target.value
});
},
submitHandler: function (event) {
event.preventDefault();
alert(this.state.helloTo);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<input type="text" value={this.state.helloTo} onChange={this.handleChange} />
<br />
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
React可控组件与不可控组件的更多相关文章
- React受控组件和非受控组件
受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...
- React Native 开发之 (07) 常用组件-View
掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的 ...
- React学习（一）父子组件通讯
React父子组件之间通讯,利用props和state完成,首先React是单向数据流,父组件可以向子组件传递props: 实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props, ...
- 【每天半小时学框架】——React.js的模板语法与组件概念
[重点提前说:组件化与虚拟DOM是React.js的核心理念!] 先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...
- 5. React 组件的协同使用 组件嵌套和Mixin
组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...
- React：受控组件与非受控组件混用实战 - 译文
原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...
- React中嵌套组件与被嵌套组件的通信
前言 在React项目的开发中经常会遇到这样一个场景:嵌套组件与被嵌套组件的通信. 比如Tab组件啊,或者下拉框组件. 场景 这里应用一个最简单的Tab组件来呈现这个场景. import React, ...
- React Native之本地文件系统访问组件react-native-fs的介绍与使用
React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...
- React对比Vue（04 父子组件的通信 )
跟vue差不多 都是props,但是react里面不仅可以给子组件传值,还可以传方法,MD尽然还可以把自己传给子组件,(卧槽vue可没有这个啊 ) vue的传递值差不多,传方法就不用了,子组件可以掉 ...
随机推荐
- ultraedit高亮显示设置
ultraedit高亮显示设置 | 浏览:2333 | 更新:2014-02-20 23:05 1 2 3 4 5 6 7 分步阅读 百度经验:jingyan.baidu.com 写代码的人对ultr ...
- bash shell漏洞及测试
1.bash shell是大多数linux发行版本的默认shell命令解释器,但是最近爆出bash shell存在漏洞. 2.如果Bash是默认的系统shell,网络攻击者可以通过发送Web请求.se ...
- Ant学习---第四节：Ant属性的介绍
一.ant 属性设置,用 property 标签,详解如下: 特点 大小写敏感: 不可改变,先到先得,谁先设定,之后的都不能改变. 设置 1 .设置 name 和 value 属性值,比如: < ...
- “我爱淘”冲刺阶段Scrum站立会议5
完成任务: 由于我们的思路做了些改变,重新设计了界面的布局. 计划任务: 实现数据库的链接,将页面布局完善. 遇到问题: 使用webservice对数据的提取
- 为边框应用图片 border-image
为边框应用图片 border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似.例如: background:url(xx.jpg) 10px 20px no ...
- Ext.Ajax中scope的作用
在Ext的前台Js中使用Ajax请求,如果想让回调函数中的this作用域跟当前的类一样如何实现呢?Ajax提供了一个参数scope. 详细代码如下: layout : { type : 'accord ...
- SPOJ-SQRBR Square Brackets
原题传送:http://www.spoj.pl/problems/SQRBR 动态规划. 设f[i][j]表示前i个位置在合法情况下缺少j个右括号的方案数. 转移方程为: f[i][j] = f[i- ...
- 手写PE文件（二）
[文章标题]: 纯手工编写的PE可执行程序 [文章作者]: Kinney [作者邮箱]: mohen_ng@sina.cn [下载地址]: 自己搜索下载 [使用工具]: C32 [操作平台]: win ...
- ol3简介
ol3从根本上进行了重新设计,相对于ol2,他符合现代浏览器的一些设计理念,使用了js新的特性,initial版本的目的是支持原来ol2的大多数功能,支持公网上流行的缓存切片,支持常见的矢量数据格式. ...
- jQuery1.9.1源码分析--Events模块
var rformElems = /^(?:input|select|textarea)$/i, rkeyEvent = /^key/, rmouseEvent = /^(?:mouse|contex ...