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"))
时间: 2024-10-06 09:21:12

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

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

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

React.js 基础入门三 ---组件状态state

React 组件实例在渲染的时候创建.这些实例在接下来的渲染中被重复使用,可以在组件方法中通过 this 访问.唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存React.render 的返回值.在其它组件内,可以使用 refs 得到相同的结果(后面会简单解释refs). 从上几章的学习,我们可以这么理解组件,学过php的Yii框架的都知道widget组件,react.js定义一个组件,通过在组件中定义各种'方法','属性'最后通过render来渲染这个组件. 其中<组建

React.js入门

React 入门实例教程 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码

前端框架React Js入门教程【精】

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用

React.js再探(四)

不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时钟的功能,要求当秒是“0”的时候,字体变为红色.注意用componentWillUpdate实现. 如       当秒是0   变为 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&qu

React.js学习知识小结(一)

学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上发现了一本很好的书React.js小书,自己断断续续也学了几天,上面也几个实战的小项目,可以跟着练练手. 话不多说,就直接来总结吧! JSX 组件 区分props和state 生命周期函数 事件系统 高阶组件 React.js的context 函数式编程 使用PropTypes检查类型 ref属性和

React.js小书总结

(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成了我们的页面. react.js 不是一个框架,它只是一个库.它只提供 UI (view)层面的解决方案.在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux.React-router 等来协助提供完整的解决方法. 组件化可以帮助我们解决前端结构的复用性问题,整个页面可以

react.JS基础

1.ReactDOM.render() React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript" src

Angular、React.js 和Node.js到底选谁?

为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情,但在这种情况下,对于到底应该选择哪种框架,程序员之间并没有一致的意见,每个人都有不同的想法,并且听起来都相当合理. 为了让一切归于和谐,本文就来探究一下这三大框架各自的优缺点. 基础知识部分: 在我们深入研究这三种框架的具体细节之前,先来了解一些前情提要.yigouyul22.com xucaiz