React useRef的使用

150 阅读1分钟

默认情况下,不能在函数组件上使用 ref 属性,因为它们没有实例

可以在函数组件内部使用 ref 属性,只要它指向一个 DOM 元素或 class 组件

import React, { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'

const Child = () => {
  const inputRef = useRef(null)
  useEffect(() => {
    inputRef.current.focus()
  }, [])
  return (
    <div>
      <input ref={inputRef} />
    </div>
  )
}
const App = () => {
  return (
    <>
      <Child />
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

页面挂载完成后Input输入框就自动聚焦了 useRef.gif