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>
)
}再次点击，可以发现只有focus会触发,背景色不会修改且控制台会有提示。
到此这篇关于react中利用useRef、forwardRef、useImperativeHandle获取并处理dom的文章就介绍到这了,更多相关react useRef、forwardRef、useImperativeHandle获取dom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！