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 上注册 回调函数存储 事件分发 小结 参考 ...
随机推荐
- 流媒体学习三-------SIP消息结构详解
SIP消息由三部分组成,即:开始行(start line).消息头(header).正文(body)Start-line:请求行Request-line 消息为 request消息时使用reques ...
- 20145211 《Java程序设计》第4周学习总结——园日涉以成趣
编程思想DRY和Once and Only Once DRY DRY原则的为"每一个知识都必须在系统内必须是单一的,明确的,权威的,具有代表性.当DRY的原则成功应用,在系统中,任何单一元素 ...
- UITextView打开文字中的URL
1. 背景介绍 UITextView里显示的文字带有url,点击url可以打开对应的网页,可以分两种打开方式:(1)在App内打开url:(2)用safari打开url. 2. 实现代码: (1)声明 ...
- 转：[ASP.NET]重構之路系列v4 – 簡單使用interface之『你也會IoC』
前言 上次v3版本,我們將Entity, Service, Dao, Utility都放到了類別庫裡面,讓我們可以輕鬆的在不同專案中用同一份組件.雖然文章沒有獲得太多的讚賞,不過相信那一定是太多人會這 ...
- asp.net 把数据导出为excel
本篇介绍c#中如何使用DataTable导出Excel,至于其他的导出方法,这里不作介绍! 1.首页从数据库读取数据,得到DataTable: DataTable dt = HelperExecute ...
- 详解js变量、作用域及内存
详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
- 脚本编程中的test、bash调试、变量计算、参数
脚本编程中的test.bash调试.变量计算.参数 1.文件测试 -e FILE:测试文件是否存在 -f FILE:测试文件是否为普通文件 -d FILE:测试路径是否为目录 -r FILE:测试当前 ...
- Linux中mod相关的命令 内核模块化 mod相关命令都是用来动态加载内核模块/驱动程序模块
Linux中mod相关的命令 内核模块化 mod相关命令都是用来动态加载内核模块/驱动程序模块 http://baike.baidu.com/link?url=lxiKxFvYm-UfJIxMjz ...
- you need to upgrade the working copy first
is too old (format 29) to work with client version '1.9.4 (r1740329)' (expects format 31) 2016年09月18 ...
- Android --MainActivity模板
系统自带的NavigationDrawerFragment 1.自动生成NavigationDrawerFragment,onCreatView代码如下 @Override public View o ...