简单按钮点击事件：

<!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. [SQL入门级] 接上篇，继续查询

    距离上一篇时间隔得蛮久了,这篇继续查询,简单总结一下聚合函数.分组的知识. 一.聚合函数(组函数/多行函数) 何谓多行函数,顾名思义就是函数作用于多行数据得出一个输出结果,什么意思呢?看图: 那么常用 ...

  2. CF 484E - Sign on Fence

    E. Sign on Fence time limit per test 4 seconds memory limit per test 256 megabytes input standard in ...

  3. Winform-DataGridView 实现如Excel的粘贴复制

    void AddDataGridView(DataGridView gridView, string s) { s = s.Replace("/", @"\") ...

  4. [转]java二维码生成与解析代码实现

    转载地址:点击打开链接 二维码,是一种采用黑白相间的平面几何图形通过相应的编码算法来记录文字.图片.网址等信息的条码图片.如下图 二维码的特点: 1.  高密度编码,信息容量大 可容纳多达1850个大 ...

  5. winfrom 文字滚动

    winfrom 文字滚动 http://www.codeproject.com/Articles/6913/Creating-a-professional-looking-GDI-drawn-cust ...

  6. 解析和风天气API的json(objective-C实现)

    暑假在家闲着没事干,心血来潮想做个天气预报APP玩玩,听说和风天气API很好,于是注册并试了下,结果它的JSON是这样的(拿我的家乡武义为例子) {"}},"status" ...

  7. 设置myeclipse新建jsp文件默认编码为UTF-8

    有三个地方需要改编码设置: 1. window-->preference-->general-->contenttype 然后在content types中展开每一个子项,并在Def ...

  8. java主函数的含义

    下面对java中的主函数进行简单的解释,解决可能困惑大家的问题,下面举的例子在实际开发中几乎不会出现,但是为了解决好奇心,大家可以这么去尝试一下! 我们在java中看到的主函数通常是这样的:publi ...

  9. 复旦大学2015--2016学年第二学期（15级）高等代数II期末考试第六大题解答

    六.(本题10分)  设 $n$ 阶复方阵 $A$ 的特征多项式为 $f(\lambda)$, 复系数多项式 $g(\lambda)$ 满足 $(f(g(\lambda)),g'(\lambda))= ...

  10. jquery.validate使用 - 常用验证脚本

    一些常用的验证脚本 不会写js了,只能从网上找一些常用的验证脚本. // 手机号码验证jQuery.validator.addMethod("mobile", function(v ...