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 上注册 回调函数存储 事件分发 小结 参考 ...
随机推荐
- go 安装
安装golang centos7 直接安装golang yum install golang centos6需添加软件源,然后再安装 rpm -ivh http://ftp.riken.jp/Linu ...
- .Net程序员安卓学习之路5：使用xutils注入View和事件以及图片的显示
xUtils注入和图片显示 一.xUtils注入 引用官方介绍: ViewUtils模块: •android中的ioc框架,完全注解方式就可以进行UI,资源和事件绑定: •新的事件绑定方式,使用混淆工 ...
- start from here
简单介绍下,小码农一只,工作两年左右,从事移动端游戏开发工作. 人类,精神正常,男,爱好游戏音乐足球美女,if(有妹子) 喜欢旅游;,取向正常. 很喜欢java,喜欢关注新技术, 应一些朋友的建议,今 ...
- 我的工具箱之Securecrt6.5.0
Securecrt是一款支持SSH的终端仿真软件,一般用于连接Linux/Unix系统.感觉这个比Putty强些. 下载地址是:http://pan.baidu.com/s/1gednNhh
- 文明3地图之二-大n型地图
存档文件:http://files.cnblogs.com/files/xiandedanteng/civ3bigN20160214.rar 地图: 简介: 这份地图几乎没有岛屿,整块大陆都连在一起像 ...
- jQuery学习之jQuery Ajax用法详解（转）
[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...
- Java静态代码分析工具——FindBugs插件的安装与使用
1 什么是FindBugs FindBugs 是一个静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.有了静态分析工具,就可以在不实际运行程序的情况对软件进行分 ...
- Glossary of view transformations
Glossary of view transformations The following terms are used to define view orientation, i.e. trans ...
- javascript实例学习之三——类新浪微博的登录框
该登录框和百度的搜索框类似,可以实现如下效果: 1.文字输入时自动弹出提示层 2,提示层根据输入文字进行自动过滤 3,提示层可以使用上下按键进行选择 4,提示层可以点击或者回车来确认输入 微博登录框h ...
- canvas 基础知识整理（一）
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...