<!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. vue-cli 如何打包上线

    以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成 而想要打包成一份很简单, 只需要 npm run build 这个命令 这两种命令的配置文件在config的ind ...

  2. （零 ） 天猫精灵接入Home Assistant-总说明

    天猫精灵设备管理 https://bbs.hassbian.com/tmall 自己的hass访问地址 http://[自己的IP或域名]:8123/states 自己的MQTT服务器访问 http: ...

  3. Java并发（四）线程池使用

    上一篇博文介绍了线程池的实现原理,现在介绍如何使用线程池. 目录 一.创建线程池 二.向线程池提交任务 三.关闭线程池 四.合理配置线程池 五.线程池的监控 线程池创建规范 一.创建线程池 我们可以通 ...

  4. Objective-C block深入理解

    一.block是什么? block是带有自动变量(局部变量)的匿名函数.它是C语言的扩展功能,C语言标准并不支持block. block是Objective-C的闭包实现,正如C++中的Lambda表 ...

  5. ASP.NET 加密解密

    1.MD5 2.DES 一 MD5 介绍:MD5是不可逆解密方式,比如对密码的加密,为了保密,让密码不能解密 public static string MD5Encrypt(string str) { ...

  6. Android学习之基础知识十—内容提供器（Content Provider）

    一.跨程序共享数据——内容提供器简介 内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能 ...

  7. luogu P1439 【模板】最长公共子序列（LCS）

    题目qwq (第一道蓝题) 先把第一个序列每个数出现的顺序记下来(数字本身不用记), 然后第二个序列的每个数都对照它的顺序,这样只要得到一个升序的序列就行了qwq 如果遇到出现顺序在前面的数,就用二分 ...

  8. root密码重置（Centos 7）

    1.系统启动时出现操作系统的选择界面,按e进入grub编辑模式. 2.选择linux16开头这一行在最后加上  \re.break 按ctrl+x 3.进入switch-root:# 输入 mount ...

  9. jsp中使用原生js实现异步交互

    Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化.并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读 ...

  10. arp绑定IP

    0.拓扑图 1.  现象:for i in `seq 1 20` ;do  sleep 1|telnet www.baidu.com 80 ;done  速度有很明显的卡顿 2.操作:用tcpdump ...