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

Posted 2020-10-08 学

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