简单按钮点击事件：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- 区别就在于 babel 支持将按照ES6写的代码转成ES5格式的代码，
    以便让其能在现代浏览器上正常运行，用jsx， 只能用ES5的语法。 -->
    <script type="text/babel">
    var HelloMessage=React.createClass({
        handClick:function(event){
            <!-- 获取真实DOM  ReactDOM.findDOMNode函数 -->
            var tipE=ReactDOM.findDOMNode(this.refs.tip)
            if(tipE.style.display==="none"){
                tipE.style.display="inline"
            }else{
                tipE.style.display="none"
            }
            <!-- 将停止事件的传播 -->
            event.stopPropagation()
            <!-- 阻止元素发生默认的行为 -->
            event.preventDefault()
        },

        render: function(){
          return (
                    
          <div>
              <button onClick={this.handClick}>显示|隐藏</button>
              <span ref="tip">测试点击</span>
          </div>
          )
        
        }
    });
    <!-- ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，
    一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（）来使用。
    更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，
    并将其移动到一个更合适的存储库。 -->
      ReactDOM.render(
       <HelloMessage />,
       document.getElementById('example')
      );
     
    </script>
  </body>
</html>

输入框的绑定简单实现

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var HelloMessage=React.createClass({
        getInitialState:function(){
              return {
                contentText:''
              }
        },
        changContent:function(event){
           this.setState({

                 contentText: event.target.value
           })
            event.stopPropagation()
            event.preventDefault()
        },

        render: function(){
          return (       
          <form>
              <input type="text" placeholder="说点什么吧" onChange={this.changContent} />
              <p>{this.state.contentText}</p>
          </form>
          )
        
        },
    });
      ReactDOM.render(
       <HelloMessage />,
       document.getElementById('example')
      );
     
    </script>
  </body>
</html>

React初识（按钮点击+输入绑定）的更多相关文章

  1. 初识Vue2（一）：表单输入绑定（附Demo）

    在线演示 http://demo.xiongze.net/ 下载地址 https://gitee.com/xiongze/Vue2.git js引用 <!--这里可以自己下载下来引用,也可以使用 ...

  2. 2019-11-29-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因...

    原文:2019-11-29-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因... title author date CreateTime c ...

  3. 2019-5-8-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因...

    title author date CreateTime categories WPF 绑定命令在 MVVM 的 CanExecute 和 Execute 在按钮点击都没触发可能的原因 lindexi ...

  4. Javascript之三种按钮点击事件

    学习Javascript必须要先掌握基本的事件方法和语法,这些都是我们学过的也是最基本的.以前忘了总结,所以现在回顾,综合地总结一下,温故而知新. Javascript有三种按钮点击事件,分别为ale ...

  5. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  6. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  7. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  8. iOS 11开发教程（十七）iOS11应用视图之使用按钮接收用户输入

    iOS 11开发教程(十七)iOS11应用视图之使用按钮接收用户输入 在iOS中提供了很多的控件以及视图来丰富用户界面,对于这些视图以及控件我们在上一章中做了简单的介绍.本章我们将详细讲解这些视图. ...

  9. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

随机推荐

  1. Oracle Contact By的使用

    1.概述 Oracle “CONNECT BY”是层次查询子句,一般用于树状或者层次结果集的查询 2.使用方式 2.1.通过Connect by 生成序列 Oracle 构造一个月份的天数 ) s_d ...

  2. nginx安装及负载均衡配置

    Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev 为俄罗斯访问量第二 ...

  3. 表单 阻止 技巧 JavaScript js

    阻止表单的提交,可以用return false 来进行阻止 长度不低于6,不高于20 if(username.length < 6 || username>20){ alert (&quo ...

  4. 使用MegaCli工具查看Raid磁盘阵列状态

    转载自:http://home.51.com/chenjianghui1987/diary/item/10051836.html 文章本身我不做过多修改了,在这里我就把自己在安装时候碰到的难点跟大家提 ...

  5. win7和u盘redhat7.1双系统安装总结

    最近win7系统越用越卡,又没钱买mac只能想办法装以下linux系统,听说redhat服务器用的比较多,就想尝试一下装一个redhat.当然,和所有人一样,搜索了很多资料.我选择装双系统,因为要抛弃 ...

  6. 添加 index_combine hint的索引

    想试验一下 index_combine这个hint,于是做了如下试验. 1.创建一个具有若干index的表 SQL> create table test as select object_id, ...

  7. C# 关于委托和事件的妙文：通过一个例子详细介绍委托和事件的作用；Observer模式简介

    委托和事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去的人每次见 ...

  8. 将自己库添加Cocoapods支持

    给库添加Cocoapods支持, 使这个工具使用起来更加方便, 更好的使用Cocoapods, 助力iOS程序开发, 下面进入正题, 想要实现这个过程, 绝对不虚此读. 首先写好一个要添加Cocoap ...

  9. xcopy中提示“无效的参数数量”的解决方法

    原因是DOS下不支持长文件名,只支持8.3格式的文件名 .如果是Windows下的命令行,对于有空格的命令行要加引号.应该是 copy "c:\program files" &qu ...

  10. BW顾问必需要清楚的：时间相关数据建模场景需求分析

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...