React 获取dom元素的两种方式

1.使用 useRef 勾子

示例代码：

import React, { Component, useRef } from 'react';

export default ()=>{
    let ref = useRef()
    let ref2= useRef()
    function set (){
        ref2.current.value =  ref.current.value
    }
    return (
        <div>
            <input ref={ref} placeholder='输入'/><input ref={ref2} placeholder='获取'/> <button onClick={set}>设值</button>
        </div>
    )
}

上面的代码目的是点击‘设值’按钮将，第一个文本框的内容复制到第二个文本框。使用Hook就这么简单。值的注意的是，React 版本需要支持Hook（16.8引入Hook）

2.使用ref属性引入函数的形式

export default ()=>{
let i ;
return (
    <div>
         <input ref={(input)=>{ i = input }} ></input>
         <button onClick={()=>{
             console.log('input ->',i.value)
         }}>获取input值</button>

    </div>
    )}

功能简单明了，点击‘获取input值’按钮打印处input的值