react中利用useRef、forwardRef、useImperativeHandle获取并处理dom

news2024/12/24 17:32:58

React如何给组件设置ref属性，如果直接绑给组件，代码如下：

import { useRef } from "react"

function MyInput() {
	return (
		<input type="text"/>
	)
}

function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}

此时点击按钮，发现无法正确拿到MyInput组件中的input元素，并且控制台报错。因为MyInput函数作用域中并没有绑定ref。

在这里插入图片描述

根据提示，需要使用forwardRef()，写法如下：

import { useRef,forwardRef } from "react"

const MyInput = forwardRef(function MyInput(props,ref) {
	return (
		<input type="text" ref={ref}/>
	)
})

function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}

但上述写法会将MyInput组件中的input全部暴露出来，导致在其他组件中，可以对该元素进行任意操作，如果仅想对外提供某些功能，需要修改为如下写法：

import { useRef,forwardRef,useImperativeHandle } from "react"

const MyInput = forwardRef(function MyInput(props,ref) {
  // 添加如下
  const inputRef = useRef(null)
  useImperativeHandle(ref,()=>{
  	return {
      // 自定义方法
      focus(){
				inputRef.current.focus()
      }
   	}
  })
	return (
		// <input type="text" ref={ref}/>
    <input type="text" ref={inputRef}/>
	)
})

function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}