react 绑定事件
1.显示隐藏
2.输入框输入内容，立即显示出来
代码如下：
注意：版本
React v15.0.1
ReactDOM v15.0.1
browser.min.js是编译文件，将代码解析为浏览器识别的js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var TestClickComponent=React.createClass({
handleClick:function(event){
var tip=this.refs.tip;
if(tip.style.display=="none"){
tip.style.display='inline';
}else{
tip.style.display='none';
}
event.stopPropagation();
event.preventDefault();
},
render:function(){
return(
<div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试</span>
</div>
)
}
}); var TestInputComponent=React.createClass({
getInitialState:function(){
return{
inputContent:''
}
},
changeHandler:function(event){
this.setState({
inputContent:event.target.value
})
event.stopPropagation();
event.preventDefault();
},
render:function(){
return(
<div>
<input type="text" onChange={this.changeHandler}/>
<span>{this.state.inputContent}</span>
</div>
)
}
});
ReactDOM.render(<div>
<TestClickComponent/>
<TestInputComponent/>
</div>,document.getElementById("container"));
</script>
</body>
</html>
react 绑定事件的更多相关文章
- React绑定事件动态化的实现方法
一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...
- react绑定事件的几种写法
方法一:最麻烦的写法,不推荐 import React from 'react'; class App extends React.Component { handleClick() { alert( ...
- 【 React - 1/100 】React绑定事件this指向问题--改变state中的值
/** * 报错: * Cannot read property 'setState' of undefined * 原因: this指向不一致.btnAddCount中的this 和render中的 ...
- react绑定事件
1.显示隐藏 2.输入框输入内容,立即显示出来 代码如下: 注意:版本 React v15.0.1 ReactDOM v15.0.1 browser.min.js是编译文件,将代码解析为浏览器识别的j ...
- 为React绑定事件，并修改state中的值
import React from 'react' export default class ClickS extends React.Component { constructor () { sup ...
- React应该如何优雅的绑定事件？
前言 由于JS的灵活性,我们在React中其实有很多种绑定事件的方式,然而,其实有许多我们常见的事件绑定,其实并不是高效的.所以本文想给大家介绍一下React绑定事件的正确姿势. 常见两种种错误绑定事 ...
- react 阻止事件冒泡
前言 在学习react阻止事件冒泡,需要先了解 合成事件 和 原生事件 合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:re ...
- react入门----事件监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 深入理解React：事件机制原理
目录 序言 DOM事件流 事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 ...
随机推荐
- linux实现c多进程
线程(thread)技术早在60年代就被提出,但真正应用多线程到操作系统中去,是在80年代中期,solaris是这方面的佼佼者.传统的Unix也支持线程的概念,但是在一个进程(process)中只允许 ...
- zepto源码--fragment--学习笔记
文档片段fragment函数默认传递三个参数: html文档片段字符串 name标签 properties额外添加的属性 函数内部实现过程: var dom, nodes, container; 中间 ...
- JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的 开源 Java EE快速开发平台
JeeSite本身是以Spring Framework为核心容器,Spring MVC为模型视图控制器,MyBatis为数据访问层, Apache Shiro为权限授权层,Ehcahe对常用数据进行缓 ...
- spring3 mvc：方法返回值的学习
新建后台代码用以测试返回类型,在这里我新建的如下: /** * 项目名称:Spring3mvc demo * Copyright ? 2010-2012 spartacus.org.cn All Ri ...
- [Stanford 2011] 知识点小结
1.获得帮助:option+click / option+double click 2.@property里的nonatomic,表示非原子性访问,atomic是obj-c里使用的一种线程保护技术, ...
- Arcgis for JS之Cluster聚类分析的实现
原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...
- Nosql之Redis篇
一.QuickStart 1.Redis简介: redis是一个性能优秀的内存数据库,通过key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字 ...
- OC initialize和init
Objective-C很有趣的一个地方是,它非常非常像C.实际上,它就是C语言加上一些其他扩展和一个运行时间(runtime). 有了这个在每个Objective-C程序中都会起作用的附加运行时间,给 ...
- Android 保持Service不被Kill掉的方法--双Service守护 && Android实现双进程守护
本文分为两个部分,第一部分为双Service守护,第二部分为双进程守护 第一部分: 一.Service简介:Java.lang.Object ↳Android.content.Context ↳an ...
- JAVA中通过代码操作PC内容进行功能的实现
1.添加计划任务,用户项目中需要添加定时提醒功能: 计划任务只需要写一个继承java.util.TimerTask的类,覆盖其中的run方法即可,例如: import java.util.*; p ...