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 = [' ...
随机推荐
- oracle数据库中 impdb/expdb 详解
创建逻辑目录,该命令不会在操作系统创建真正的目录,最好以system等管理员创建.create directory dpdata as 'd:\test\dump'; 二.查看管理理员目录(同时查看操 ...
- python导包问题，这一篇就够了
解决办法: 将项目所在的根目录添加到sys.path中 在入口文件中加入如下代码: import sys import os # 将 项目的根目录添加到sys.path中 BASE_DIR = os. ...
- JavaScript-日常代码-时间
取得今天0点: var start = new Date(new Date(new Date().toLocaleDateString()).getTime()); console.log(start ...
- MySQL服务优化参数设置参考
l 通用类: key_buffer_size 含义:用于索引块的缓冲区大小,增加它可得到更好处理的索引(对所有读和多重写). 影响:对于MyISAM表的影响不是很大,MyISAM会使用系统的缓存来存储 ...
- Oracle 全部后台进程简介
LGWR,DBWR,SMON,PMON,CKPT是必需的五个后台进程.ARCH是最重要的可选后台进程.最重要的六个进程:1.LGWR重做日志写进程,LOG write 负责将重做日志缓冲区记录顺序写入 ...
- 块状链表 codevs 2333弹飞绵羊
块状链表,分块处理,先预处理每一个点跳到下一个块 跳到哪,步数.然后修改的时候,修该那一个块即可 #include<cstdio>#include<cmath>int a[20 ...
- Codeforces 221d D. Little Elephant and Array
二次联通门 : Codeforces 221d D. Little Elephant and Array /* Codeforces 221d D. Little Elephant and Array ...
- Ubuntu16.04 安装 CUDA9.2（总结一些新手容易遇到的问题）
系统:Ubuntu16.04 64bit 显卡:Nvidia GEFORCE 940MX 驱动:NVIDIA-Linux-x86_64-396.18.run 软件:cuda_9.2.88_396.26 ...
- RESOURCE SUMMARY
I dont know where to start so searched the net and get a lot of free videos, my plan is to watch the ...
- GitHub的SSH免密连接
1.进入当前用户的家目录 $ cd ~ 2.删除.ssh 目录 $ rm -rvf .ssh 3.运行命令生成.ssh 密钥目录 $ ssh-keygen -t rsa -C [GitHub邮箱] [ ...