简单按钮点击事件：

<!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. 原生态PHP+mysql 实现分页

    <?php/** * 数据分页 * 时间:2016-07-06 *//**1传入页码**/ $page = $_GET['p'];/**2根据页码取数据:php->mysql处理**/$h ...

  2. Android studio 中的配置编译错误总结

    1.编译Andorid 工程的时候,有时候出现gradle 报下面的错误. Error:(1, 0) Cause: com/android/build/gradle/LibraryPlugin : U ...

  3. 初始化datetimepicker的时候就报了js异常

    全栈眼中的http这一章分别从前端视角和后端视角来分析前后端所关注的侧重点.前端可以通过抓包工具或者chrome devtools 查看每个请求,同域下的资源请求数量等来找出优化点,更关注的是一个页面 ...

  4. qt qml qchart 图表组件

    qt qml qchart 图表组件 * Author: Julien Wintz * Created: Thu Feb 13 23:41:59 2014 (+0100) 这玩意是从chart.js迁 ...

  5. 读书笔记 --TCP :传输控制协议（二）

    TCP建立连接 请求端(客户端)发送一个SYN指明客户端打算连接的服务器端口号,以及初始序列号. 服务端发回包含服务器的初始序号的SYN报文段作为应答.同时,将确认序号设置为客户的ISN加1以对客户的 ...

  6. angular.extend()和 angular.copy()的区别

    1.angular.copy angular.copy(source, [destination]);  // source: copy的对象. 可以使任意类型, 包括null和undefined. ...

  7. CI框架--事务

    CI框架中事务封装的很完善,使用起来很简单 1.不开启事务 //不开启事务 前两个sql 能够执行成功,第三个执行失败 $this->device_model->addForCamera( ...

  8. ADB server didn't ACK * failed to start daemon *

    问题描述:在eclipse的Logcat出现错误 [2014-01-08 14:00:07 - adb] ADB server didn't ACK [2014-01-08 14:00:07 - ad ...

  9. AndroidManifest.xml详解（上）

    本文编辑整理自:http://blog.163.com/hero_213/blog/static/39891214201242835410742/ 一.关于AndroidManifest.xml    ...

  10. String高效编程优化（Java）

    1, substring截取超大字符串可能造成的“内存泄漏” 2,+ 操作符的优化和局限 3,StringBuilder和StringBuffer 4,split和StringTokenizer做简单 ...