<!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. linux 下 mysql-5.5.8 安装

    安装环境:Linux服务器CentOS 5.5 安装版本:mysql-5.5.8.tar.gz 1.安装 cmake 编译器. 1).下载cmake #cd /usr/local/src #wget ...

  2. How enable deprecated functions in Qt5

    问题:Qt5中如何启用以 QT_DEPRECATED_SINCE标识的已经废弃/过时的方法? I want to port a Qt4 program to Qt5 and some function ...

  3. Objective-C 单例实现

    Objective-C中用的最多的设计模式就是单例,它最常见的实现如下: + (WPXXService *)sharedInstance { static WPXXService *g_service ...

  4. ubuntu 系统升级 cmake

    由于Ubuntu14.04的cmake版本为2.8.x,而如果需要cmake3.x版本时,无法生成makefile,有两种方法可以安装cmake3.4.1: 方法1: sudo apt-get ins ...

  5. 基于TerraExplorer Pro 6.1 实现对Shape中Feature对象拾取查询

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. day81

    昨日回顾: 昨日回顾: auth组件: -验证:authenticat(request,username=') -登录:login(request,user) -注销:logout(request), ...

  7. sql语句 update

    UPDATE ban_group AS A SET  NAME ='锅炉三班' FROM     hr_employee AS b  WHERE     b.job_no = '1394' AND A ...

  8. SPOJ Qtree系列 5/7

    Qtree1 树剖裸题 注意把边权移到深度较深的点上,树剖跳的时候不要将LCA的答案统计上就行了 #include<stdio.h> #include<string.h> #d ...

  9. thymeleaf参考手册

    1.创建 html <!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"></html&g ...

  10. Luogu P4016 负载平衡问题

    传说中的网络流24题之一,我刷的第二题菜. 据说这种东西做完了就可以有质的飞越?不过看着这些Luogu评级就有点蒙蔽. 首先我们看一下题目发现这不是均分纸牌的加强板吗,但是那个环的操作极大地限制了我的 ...