<!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 点击事件的更多相关文章

  1. react 点击事件+父子传值

    接下来要做的效果是,在父组件添加两个按钮,点击后改变父组件传过去的值 父组件 import React, { Component } from 'react'; import Test from '. ...

  2. react 点击事件传值

    test(e){ console.log(e.target) } <button onClick={(e)=>{this.test(e)}}></button> 有时要是 ...

  3. react native 中webview内的点击事件传到外部原生调用

    先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...

  4. 深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  5. React 的 DOM 添加多个点击事件

    第一直觉代码如下:后果是写在后面的事件函数覆盖前面的事件函数,只执行第二条(弹出 222). import React, { Component, Fragment } from 'react' ex ...

  6. react native 键盘遮挡按钮点击事件

    在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...

  7. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  8. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

  9. angularJs 多文件动态上传（删除其中一个文件的时候，要么file没被删除，要么删除了之后，点击事件失效）

    <div cacModule.controller('CacScriptEditCtrl', CacScriptEditCtrl); CacScriptEditCtrl.$inject = [' ...

随机推荐

  1. CSS定位有几种？分别描述其不同

    static(静态定位):即默认值,元素框正常生成的,top.right.bottom.left这些偏移属性不会影响静态定位的正常显示(属性不应用): relative(相对定位):元素相对自身偏移某 ...

  2. CSS display详解

    1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行 ...

  3. public abstract啥时候可以省略?

    父类是抽象类,其中有抽象方法,那么子类继承父类,并把父类中的所有方法都实现覆盖了,子类才有创建对象实例的能力,否则子类也必须是抽象类.抽象类中可以有构造方法,是子类在构造子类对象时需要调用父类(抽象类 ...

  4. 差分约束 4416 FFF 团卧底的后宫

    /* 4416 FFF 团卧底的后宫  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 你在某日收到了 FFF ...

  5. ST表 「 从入门到入门 · 浅显理解 」

    ST 表是个好东西,虽然前些天 ldq 学长已经讲完啦,但是那天他讲了那么多,让智商受限的我完全没有全部接受,选择性的扔掉了一部分(其实不舍的扔,记不住QAQ). ST 表最简单的应用就是查询区间最大 ...

  6. FOI冬令营 Day1

    目录 T1.全连(fc) 传送门 Code  T2.原样输出(copy) 传送门 Code  T3.不同的缩写(diff) 传送门 Code  打算把省冬的题目放上来,主要是防止自己偷懒不订正 T1. ...

  7. zabbix（12）使用Grafana

    一.Grafana介绍 Grafana是一个跨平台的开源的度量分析和可视化工具,可以通过将采集的数据查询然后可视化的展示,并及时通知.它主要有以下六大特点: 1.展示方式:快速灵活的客户端图表,面板插 ...

  8. 小程序 之自定义tabbar上边框颜色

    一.设置borderStyle 二.设置page样式 page::after{ content: ''; position: fixed; left: 0; bottom: 0; width: 100 ...

  9. OpenFOAM 中边界条件的设定【转载】

    转载自:http://blog.sina.com.cn/s/blog_a0b4201d0102v7jt.html 用习惯了FLUENT的操作界面,再使用OpenFOAM就会觉得非常繁琐.遇到的第一个问 ...

  10. mysql远程访问设置

    MySQL GUI Tools 开启mysql的远程访问权限 默认mysql的用户是没有远程访问的权限的,因此当程序跟数据库不在同一台服务器上时,我们需要开启mysql的远程访问权限. 主流的有两种方 ...