react.js 给标识ref，获取内容

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"))

转载于:https://www.cnblogs.com/jeremy-o/p/9447916.html

react.js 给标识ref，获取内容相关推荐

gatsby_如何使用Gatsby.js来获取内容
gatsby by Dimitri Ivashchuk 由Dimitri Ivashchuk 如何使用Gatsby.js来获取内容 (How to source content with Gatsby ...
js怎么获取ueditor值_UEditor获取内容
1,引入百度ueditor编辑器js库以上两个js文件,请读者前往百度开放平台ueditor频道下载. 2, 之间添加html代码,其中获取内容等功能按钮也一并添加获得整个html的内容获得内容 ...
react中使用ref获取
1.react 函数组件使用useRef获取input框中的值 import React, { useRef } from "react";export default funct ...
js中增加标签删除标签和input修改获取内容
1.增加标签创建标签:document.createElement('标签id名') 在某一标签内的最后面插入标签:c.appendChild(b): //即给c加一个孩子b,记住这个孩子是后面进来 ...
【学习笔记】React.js
视频地址 https://www.bilibili.com/video/BV1wy4y1D7JT 入门 React是什么使用 React 框架的程序,展现页面需要分三步: 发送请求获取数据处理数据 ...
React.js再探（四）
不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
React.js核心原理实现：首次渲染机制
2019独角兽企业重金招聘Python工程师标准>>> 一.前言 react.js和vue.js无疑是当下最火的js框架了,它们为组件式的开发传统前端页面.SPA页面.前后端分离等带 ...
react.js基础
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

react.js 给标识ref，获取内容

react.js 给标识ref，获取内容相关推荐

最新文章

热门文章