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. 回顾PMP考试

    2014年9月20日,于我来说绝对可以说是一个重要的日子.经过考场里4个多小时(4个小时正式的时间+前面的签到以及后面的survey等)的鏖战,出去之后才发现北京外国语大学的楼宇是如此的漂亮,阳光也是 ...

  2. PHP一句话后门过狗姿势万千之理论篇

    写在前面: 过狗相关的资料网上也是有很多,所以在我接下来的文章中,可能观点或者举例可能会与网上部分雷同,或者表述不够全面. 但是我只能说,我所传达给大家的信息,是我目前所掌握或者了解的,不能保证所有人 ...

  3. python笔记_magic变量和函数

    前言 先扯一点背景知识 PEP8(Python Enhancement Proposal)是一份python的编码规范,链接:http://www.python.org/dev/peps/pep-00 ...

  4. Smart Contracts

    A smart contract is a computer code running on top of a blockchain containing a set of rules under w ...

  5. Web前端基础怎么学? JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  6. 小程序08 小程序访问服务器API

    后台交互 小程序是前端框架,需要和后台交互,本次课程主要介绍网络API. 小程序提供的网络访问API wx.request接口 发起 HTTPS 网络请求. 使用rqeust接口前的工作 1.小程序需 ...

  7. java 定时任务-servlet

    在web.xml中配置监听类. <listener> <listener-class>com.skin.generate.action.TaskManager</list ...

  8. IOS学习笔记37——ViewController生命周期详解

    在我之前的学习笔记中讨论过ViewController,过了这么久,对它也有了新的认识和体会,ViewController是我们在开发过程中碰到最多的朋友,今天就来好好认识一下它.ViewContro ...

  9. poj2065 SETI

    题目描述: 多组数据,每次给出一个模数$p$和一个表示答案的字符串, 相当于给出一个方程组:$$a_1*1^{1}+a_2*1^{2}+……+a_n*1^{n}=f_1$$ $$a_1*2^{1}+a ...

  10. 队列的JS实现及广度优先搜索(BFS)的实现

    队列是先进先出(FIFO)的数据结构,插入操作叫做入队,只能添加在队列的末尾:删除操作叫做出队,只能移除第一个元素.在JS中,用数组可以很简单的实现队列.JavaScript实现排序算法 functi ...