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 上注册 回调函数存储 事件分发 小结 参考 ...
随机推荐
- nodejs爬虫
前言 几个月之前,有同事找我要PHP CI框架写的OA系统.他跟我说,他需要学习PHP CI框架,我建议他学习大牛写的国产优秀框架QeePHP. 我上QeePHP官网,发现官方网站打不开了,GOOGL ...
- php--linux环境下的主从复制
1.编辑数据库配置文件my.cnf,一般在/etc/目录下. #vi /etc/my.cnf 在[mysqld]的下面加入下面代码:[第一步查看本文件夹中代码是否已经存在,存在不需要进行添加] 只是修 ...
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题？
为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...
- 高效的两段式循环缓冲区──BipBuffer
Simon Cooke,美国 (原作者) 北京理工大学 20981 陈罡(翻译) 写在前面的话: 循环缓冲区是一个非常常用的数据存储结构,已经被广泛地用于连续.流数据的存储和通信应用中.对于循环缓冲区 ...
- (leetcode)Minimum Size Subarray Sum
Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...
- Intersecting Lines---poj1269(求两直线的位置关系)
题目链接:http://poj.org/problem?id=1269 题意:给你两条直线上的任意不同的两点,然后求两条直线的位置关系,如果相交于一点输出该点坐标; #include<iostr ...
- Windows-001-Win7系统变量设置
本节主要讲述Windows系统环境变量配置介绍,以 Windows 7 为例讲解. 1.右键单击 计算机,选择 属性,进入 系统 界面,如下所示: 2.点击上图中的 高级系统设置,进入 系统属性 界面 ...
- Win10如何开启IIS服务以及如何打开IIS管理器
一.开启IIS服务 1.右键点击开始菜单或者使用“win+x”组合键,如然后选择“控制面板”,下如: 2.再控制面板中选择“程序”-->“启动或关闭windows功能”,在弹出的对话框中勾选如下 ...
- git还原成某个点
1.本地 git reset --hard commit值 git push -f // 强制同步到git库(git服务器) 2.项目所在线上服务器 git reset --ha ...
- 【转】为什么调用 FragmentPagerAdapter.notifyDataSetChanged() 并不能更新其 Fragment？
为什么调用 FragmentPagerAdapter.notifyDataSetChanged() 并不能更新其 Fragment? 转自:http://www.apkbus.com/android- ...