useRef-操作DOM

使用场景：在react中操作dom，通过useRef这个hooks来获取dom

具体步骤：1.引入useRef

import React, { useState, useRef } from 'react'

2.调用 useRef函数 并定义ref

 const refTxt = useRef(null)

具体代码如下

// eslint-disable-next-line no-use-before-define
import React, { useState, useRef } from 'react'
import ReactDOM from 'react-dom'
class Com1 extends React.Component {
  render () {
    return (<div>
        com1组件
    </div>)
  }
}
export default function Dom () {
  // 定义ref的状态
  const [ref, setRef] = useState(5)
  // 定义dom的ref状态
  // eslint-disable-next-line no-unused-vars
  const refTxt = useRef(null)
  // 定义refCom组件的ref状态
  const refCom = useRef(null)
  console.log(setRef)
  console.log(refTxt, refCom)
  // 点击按钮拿到输入框input的值
  const hClick = () => {
    console.log(refTxt.current.value)
  }
  return (<div>
        useRef操作dom
        ref:{ref}
        <input ref={refTxt}/>
        <Com1 ref={refCom}/>
        <button type="button" onClick={hClick}>点击按钮</button>
    </div>)
}
ReactDOM.render(<Dom />, document.getElementById('root'))