import React,{Component} from 'react'
import ReactDOM from 'react-dom'
class App extends Component{
//给一个初始化状态
constructor(){
super();
this.state={
result:0
}
}
handChange=()=>{
//获取input a的类容,这个a就是我们给的标识ref="a"
let a=this.refs.a.value||0;
let b=this.refs.b.value||0;
//改变状态,更新视图
this.setState({result:parseFloat(a)+parseFloat(b)})
}
render(){
return (
<div>
<input type="text" ref="a" onChange={this.handChange}/>
+
<input type="text" ref="b" onChange={this.handChange}/>
<p>{this.state.result}</p>
</div>
)
}
} ReactDOM.render(<App/>,document.querySelector("#root"))

react.js 给标识ref,获取内容的更多相关文章

  1. React.js入门笔记(再续):评论框的实现

    本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...

  2. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  3. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  4. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  5. ref 和 React.js 中的 DOM 操作

    在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...

  6. react ref获取dom对象

    react文档 step = React.createRef(); // init <div ref={this.step}></div> // bind componentD ...

  7. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  8. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  9. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

随机推荐

  1. Java GUI 布局管理器

    容器可设置布局管理器,管理容器中组件的布局: container.setLayout(new XxxLayout()); Java有6种布局管理器,AWT提供了5种: FlowLayout Borde ...

  2. RPC之远程过程调用

    一. 简介 将一个函数运行在远程计算机上并且等待获取那里的结果,这个称作远程过程调用(Remote Procedure Call)或者 RPC. RPC是一个计算机通信协议. 1. 类比: 将计算机服 ...

  3. Javaweb学习笔记7—JDBC技术

      今天来讲javaweb的第7阶段学习. JDBC技术,关于JDBC本篇博客只介绍了它的一部分,后面博客会更加深入探讨. 老规矩,首先先用一张思维导图来展现今天的博客内容.   ps:我的思维是用的 ...

  4. 【HEVC帧间预测论文】P1.7 Content Based Hierarchical Fast Coding Unit Decision Algorithm

    Content Based Hierarchical Fast Coding Unit Decision Algorithm For HEVC <HEVC标准介绍.HEVC帧间预测论文笔记> ...

  5. Makeflie自动生成依赖,自动化编译

    在netbeans里开发,有一个重要文件makefile,是用来编译所有的文件. 项目的目录结构如下,扁平的目录结构,如何实现自动化编译,写makefile呢? 第一版 基础版: CC = g++ C ...

  6. uva1609 Foul Play

    思维 创造条件使一轮比赛之后仍满足1号打败至少一半,并剩下至少一个t' 紫书上的思路很清晰阶段1,3保证黑色至少消灭1半 #include<cstdio> #include<vect ...

  7. 判断请求是否为ajax

    判断请求是否为ajax 转载:http://www.cnblogs.com/tony-jingzhou/archive/2012/07/30/2615612.html x-requested-with ...

  8. OpenCV2:第一章 图像表示

    一.简介 在OpenCV中,可以用C++语法的Mat类来表示一张图像 也可以用C语法的lpllmage或CvMat结构体来表示一张图像 1.单通道像素值 2.多通道像素值 OpenCV默认颜色顺序为B ...

  9. 教你学会Linux/Unix下的vi文本编辑器

    vi编辑器是Unix/Linux系统管理员必须学会使用的编辑器.看了不少关于vi的资料,终于得到这个总结. 首先,记住vi编辑器的两个模式:1.命令模式 2.编辑模式. 在一个UNIX/Linux的s ...

  10. Luogu P3806 点分治模板1

    题意: 给定一棵有n个点的树询问树上距离为k的点对是否存在. 分析: 这个题的询问和点数都不多(但是显然暴力是不太好过的,即使有人暴力过了) 这题应该怎么用点分治呢.显然,一个模板题,我们直接用套路, ...