react 点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var TestClickComponent = React.createClass({
handleClick:function(event){
var tipE = React.findDOMNode(this.refs.tip); {/* 获取索引 */}
if(tipE.style.display === 'none'){
tipE.style.display = 'inline';
}else{
tipE.style.display='none';
}
event.preventDefault();
event.stopPropagation();
},
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.preventDefault();
event.stopPropagation();
},
render:function(){
return(
<div>
<input type="text" onChange={this.changeHandler} /><span>{this.state.inputContent}</span>
</div>
)
}
});
React.render(
<div>
<TestClickComponent></TestClickComponent>
<TestInputComponent></TestInputComponent>
</div>,document.getElementById("container") )
</script>
</body>
</html>
react 点击事件的更多相关文章
- react 点击事件+父子传值
接下来要做的效果是,在父组件添加两个按钮,点击后改变父组件传过去的值 父组件 import React, { Component } from 'react'; import Test from '. ...
- react 点击事件传值
test(e){ console.log(e.target) } <button onClick={(e)=>{this.test(e)}}></button> 有时要是 ...
- react native 中webview内的点击事件传到外部原生调用
先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...
- 深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
- React 的 DOM 添加多个点击事件
第一直觉代码如下:后果是写在后面的事件函数覆盖前面的事件函数,只执行第二条(弹出 222). import React, { Component, Fragment } from 'react' ex ...
- react native 键盘遮挡按钮点击事件
在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...
- React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
- angularJs 多文件动态上传（删除其中一个文件的时候，要么file没被删除，要么删除了之后，点击事件失效）
<div cacModule.controller('CacScriptEditCtrl', CacScriptEditCtrl); CacScriptEditCtrl.$inject = [' ...
随机推荐
- python - super 寻找继承关系
""" super 是根据当前类对象的 mro 的继承顺序进行函数的调用的 """ class Base(object): def fn(s ...
- jmeter HTTP请求之content-type
对于初次接触接口的同学来说,自己在发送一个http请求时,总会遇到这样那样的问题,比如必传参数不存在啊 出现这样类似问题的问题首先排除的应该是content-type是否正确,那什么是content- ...
- PowerDesigner创建表 拷贝创建表语句 SQLSERVER创建数据库 使用查询 创建表 并且添加数据
PowerDesigner创建表 : 1.双击打开PowerDesigner 2.双击打开Create model 3左键点击Model types,再点击Physical Data m ...
- php利用webuploader实现超大文件分片上传、断点续传
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...
- 拷贝和遍历DOM树
一.浅拷贝: 拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制, 或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用 ...
- 爬虫（四）：BeautifulSoup库的使用
一:beautifulsoup简介 beautifulsoup是一个非常强大的工具,爬虫利器. beautifulSoup “美味的汤,绿色的浓汤” 一个灵活又方便的网页解析库,处理高效,支持多种解析 ...
- 【概率论】5-6:正态分布(The Normal Distributions Part I)
title: [概率论]5-6:正态分布(The Normal Distributions Part I) categories: - Mathematic - Probability keyword ...
- C++的面向对象的Dijkstra写法
C++的面向对象的Dijkstra写法 面向对象特点的充分使用 清晰的逻辑 简洁的图输入 程序 面向对象特点的充分使用 清晰明确的类实现 class Edge(边的实现) class Req (路由请 ...
- 网络攻击-XSS攻击详解
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- [RK3288] 外接USB设备出现丢数
CPU:RK3288 系统:Android 5.1 主板外接 USB 接口的外设,经常会出现丢数的现象,这种问题在很多 USB 接口的外设上都遇到过,例如:USB读卡器.USB扫描枪等 有一个共同点是 ...