<!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. window10+linux双系统安装

    参考教程 安装Windos U盘制作 启动UltraISO,点击“文件”菜单下的“打开”按钮,打开已准备好的ISO镜像文件,如JINHU_SYSTEM_TOOL_2009.iso 刻录U盘过程.点击菜 ...

  2. JAVA 第九周学习总结

    20175308 2018-2019-2 <Java程序设计>第九周学习总结 教材学习内容总结 准备工作 下载MYSQL数据库管理系统 前往MYSQL官网的下载页面,选择相应平台的MYSQ ...

  3. AI 线性代数

    1.标量.向量.矩阵和张量 1)标量(scalar),一个数,例如自然数和实数. 2)向量(vector),一列有序数.可以看作只有一列的矩阵. 3)矩阵(matrix),二维数组.转置(transp ...

  4. Android学习之基础知识一

    一.Android的系统架构: 1.Linux内核层:提供Android硬件的各种驱动(显示驱动,音频驱动,蓝牙驱动,WiFi驱动等等) 2.系统运行库层:提供各种特性支持(数据库支持,绘图支持,浏览 ...

  5. 利用 ProtoThreads实现Arduino多线程处理（1）

    转载请注明:@小五义http://www.cnblogs.com/xiaowuyiQQ群:64770604 这几天和群里小V同学讨论一个项目时,偶然发现了 ProtoThreads,简称PT,用其来实 ...

  6. 你真的会python嘛?

    前言 我这个博客一直都是一些技术分享,show code的地方,我从来没有写过个人生活或者情感杂谈,当然我也从来没有谈论过我对什么东西的喜恶. 很多人喜欢喷XX语言,喜欢谈论XX和YY的优缺,甚至凑了 ...

  7. Luogu4622 COCI2012-2013#6 JEDAN 组合、DP

    传送门 题意:给出一个$N$个数的序列$a_i$,其中$a_i=-1$表示第$i$个位置数字未知,问有多少种用非负整数代替$a_i$中$-1$的方法使得从全$0$序列经过以下操作若干次得到序列$a_i ...

  8. AutoMapper自动映射

    十年河东,十年河西,莫欺少年穷. 学无止境,精益求精. 不扯犊子,直接进入正题: AutoMapper自动映射常用于EF中,能很好的解决DTO和Model之间相互映射的问题.在未使用AutoMappe ...

  9. Create-React-App 使用记录

    如果要修改 host 和 端口,需要在项目根目录添加 .env 文件,然后再文件中添加 HOST=dev.zhengtongauto.com PORT=3000 如果需要加上反向代理,需要处理接口跨域 ...

  10. assert_param函数的用法

    在STM32的固件库和提供的例程中,到处都可以见到assert_param()的使用.如果打开任何一个例程中的stm32f10x_conf.h文件,就可以看到实际上assert_param是一个宏定义 ...