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

本文主要是介绍react中利用useRef、forwardRef、useImperativeHandle获取并处理dom，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>)
}