<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var MyComponent = React.createClass({
    handleClick:function(){
      console.log(
      parseInt(this.refs.num1.value)+
      parseInt(this.refs.num2.value));
    },
    render:function(){
      return <div>
      <input type="text" ref='num1'/>
      <br/>
      <input type="text" ref='num2'/>
      <br/>
      <button onClick={this.handleClick}>求和</button>
      </div>
    }
  })

  ReactDOM.render(
  <MyComponent/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React 表单refs的更多相关文章

  1. react 表单获取多个input

    react  表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...

  2. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  3. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  4. 6. React 表单使用介绍

            表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...

  5. react 表单

    import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...

  6. React表单元素的使用

    一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...

  7. react表单事件和取值

    常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...

  8. React 表单组件

    诸如 <input>.<textarea>.<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化.这些组件提供的界面使响应用户交互的表单 ...

  9. [转]React表单无法输入原因----约束性和非约束性组件

    转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...

随机推荐

  1. windos 系统文件包含

    解决VS2013找不到windows.h文件方法 右键属性管理器添加 包含路径(依据sdk安装目录,我的是64位系统) C:\Program Files (x86)\Microsoft SDKs\Wi ...

  2. MP实战系列(五)之封装方法讲解

    mybatis plus封装的方法怎么用?以及它们对应的sql是那些sql?及其什么情况用? 这些需要说下,以下我将会将我常用的说下,不是常用的,可能提以下或者不提. 根据主键查询 UserEntit ...

  3. Spring Security 用户认证原理分析

    本文基于 spring-security-core-5.1.1 和 tomcat-embed-core-9.0.12. 核心原理 用户通过 username 和 password 登录时,后端会经过一 ...

  4. java StringBuilder和StringBuffer 用法

    可变的字符串,兄弟关系StringBuilder:效率高,安全性低StringBuffer:效率低,安全性高 StringBuilder 的常用方法的使用,StringBuffer用法一样. publ ...

  5. 网易云音乐 歌词制作软件 BesLyric （最新版本下载）

    导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...

  6. highcharts中数据列点击事件

    Highcharts.chart('container', { xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul ...

  7. vba报表制作

    Option Explicit Dim sql, tj As String, rnum As Double, r As Integer  Private Sub CommandButton1_Clic ...

  8. 3.5《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—第三章小结

    本章使用的重要命令总结在Table 5中 命令 描述 示例 curl 与URL交互 $ curl -O example.com which 指出程序的在计算机的路径 $ echo bar >&g ...

  9. Ionic App之国际化(2) json数组的处理

    在Ionic App值国际化(1)中我们实现了对单个参数的多语言处理,下面开始如何进行数组的处理. 1.在我们的多语言文件中设置要访问的json数组,en.json和zh.json,此处就以en.js ...

  10. [Oracle]ORA-600[kdBlkCheckError]LOB坏块处理

    [Oracle]ORA-600[kdBlkCheckError]LOB坏块处理 客户环境报如下错误: ORA - 00600: Internal error code, arguments: [kdB ...