react中ref的用法

ref:可以利用ref获取真实的dom元素

• 直接使用ref起名字,利用this.refs.xxx.value来获取值

import React from "react"
import ReactDOM from "react-dom"
class Counter extends React.Component{
    state = {number:0} 
    add = ()=>{
       let num1 = this.refs.num1.value;
       let num2 = this.refs.num2.value;
       let res = parseFloat(num1)+parseFloat(num2)
       this.refs.res.value = res;
    }
    render(){
        return(
            <div>
                <input ref="num1" />+<input ref="num2" /><button onClick={this.add}>=</button><input ref="res"/>
            </div>
        )
    }
}
ReactDOM.render(<Counter />, window.app)

• 利用ref函数,获取dom元素

import React from "react";
import ReactDOM from "react-dom";
class Counter extends React.Component {
  state = { number: 0 };
  add = () => {
    let num1 = this.num1.value;
    let num2 = this.num2.value;
    let res = parseFloat(num1) + parseFloat(num2);
    this.res.value = res;
  };
  render() {
    return (
      <div>
        <input ref={input => (this.num1 = input)} />+
        <input ref={input => (this.num2 = input)} />
        <button onClick={this.add}>=</button>
        <input ref={input => (this.res = input)} />
      </div>
    );
  }
}
ReactDOM.render(<Counter />, window.app);

• 通过createRef来创建：利用react.createRef来创建(推荐使用)

import React from "react";
import ReactDOM from "react-dom";
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.num1 = React.createRef(); //创建ref对象，挂到当前组件上
    this.num2 = React.createRef();
    this.res = React.createRef();
  }
  state = { number: 0 };
  add = () => {
    let num1 = this.num1.current.value;
    let num2 = this.num2.current.value;
    let res = parseFloat(num1) + parseFloat(num2);
    this.res.current.value = res;
  };
  render() {
    return (
      <div>
        <input ref={this.num1} />+
        <input ref={this.num2} />
        <button onClick={this.add}>=</button>
        <input ref={this.res} />
      </div>
    );
  }
}
ReactDOM.render(<Counter />, window.app);