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学习第二章

  2. c#内存管理,垃圾回收和资源释放

    <1>关于虚拟内存的概念 Windows使用一个虚拟寻址系统,该系统把程序可用的内存地址映射到硬件内存中的实际地址上去,这些任务完全由windows后台管理,其实际结果是32位处理机上的每 ...

  3. Java String startsWith()方法

    描述: 这个方法有两个变体并测试如果一个字符串开头的指定索引指定的前缀或在默认情况下从字符串开始位置. 语法 此方法定义的语法如下: public boolean startsWith(String ...

  4. Linux-04 Linux中Tomcat和MySQL的安装

    1.下载apache-tomcat-7.0.79-tar.tar2.解压到当前用户目录,改名为tomcat [hduser@node1 ~]$ tar -zxvf apache-tomcat-7.0. ...

  5. python:第一章

    完成同一个任务,C语言要写1000行代码,Java只需要写100行,而Python可能只要20行. 代码少的代价是运行速度慢,C程序运行1秒钟,Java程序可能需要2秒,而Python程序可能就需要1 ...

  6. git 超时 时长 设置?

    [Pipeline] { (Checkout) [Pipeline] checkout > git.exe rev-parse --is-inside-work-tree # timeout=1 ...

  7. dll加载遇到的问题

    dll加载有两种形式,分别是隐式加载和显式加载. 隐式加载在编译的时候就将dll文件编译到可执行文件中去,程序发布的时候可以不用讲dll带着.缺点是,这样编译出来后,程序会很大. 显式加载是指在程序运 ...

  8. Windows环境下安装 mysql-8.0.11-winx64 遇到的问题解决办法

    下载mysql安装包,我的是下载mysql-8.0.11-winx64,解压到你想安装的目录下,然后配置环境(window环境下,mac本还没试过), 1.首先,配置环境:右击此电脑->属性-& ...

  9. windows环境下Robot Framework的安装步骤

    Robot Framework是由python编写的开源的用来做功能性测试的自动化测试框架.本文介绍Robot Framework在windows环境下的安装步骤. 安装python从python官网 ...

  10. CSS3---关于背景

    1.background-origin:设置元素背景图片的原始起始位置. background-origin : border-box | padding-box | content-box;    ...