react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom
React如何給組件設(shè)置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}>點(diǎn)擊</button>
<MyInput ref={myRef}></MyInput>
</div>
)
}此時(shí)點(diǎn)擊按鈕，發(fā)現(xiàn)無法正確拿到MyInput組件中的input元素，并且控制臺報(bào)錯(cuò)。因?yàn)镸yInput函數(shù)作用域中并沒有綁定ref。
根據(jù)提示，需要使用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}>點(diǎn)擊</button>
<MyInput ref={myRef}></MyInput>
</div>
)
}但上述寫法會(huì)將MyInput組件中的input全部暴露出來，導(dǎo)致在其他組件中，可以對該元素進(jìn)行任意操作，如果僅想對外提供某些功能，需要修改為如下寫法：
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}>點(diǎn)擊</button>
<MyInput ref={myRef}></MyInput>
</div>
)
}再次點(diǎn)擊，可以發(fā)現(xiàn)只有focus會(huì)觸發(fā),背景色不會(huì)修改且控制臺會(huì)有提示。
到此這篇關(guān)于react中利用useRef、forwardRef、useImperativeHandle獲取并處理dom的文章就介紹到這了,更多相關(guān)react useRef、forwardRef、useImperativeHandle獲取dom內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react中實(shí)現(xiàn)修改input的defaultValue
這篇文章主要介紹了react中實(shí)現(xiàn)修改input的defaultValue方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了react配置px轉(zhuǎn)換rem的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
ReactNative項(xiàng)目OpenHarmony三方庫集成實(shí)戰(zhàn)指南:react-native-calendar-even
文章介紹了react-native-calendar-events庫,這是一個(gè)強(qiáng)大的日歷事件庫,支持讀寫系統(tǒng)日歷,實(shí)現(xiàn)日程管理功能,文章說明了其安裝配置、核心功能、API使用方法,并提供了注意事項(xiàng)和完整示例,適用于React Native開發(fā)中的日歷事件管理,感興趣的朋友一起看看吧2026-04-04
React實(shí)現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖（Debounce）技術(shù)可以有效地限制函數(shù)在短時(shí)間內(nèi)的頻繁調(diào)用,下面我們就來看看如何使用Lodash庫中的debounce函數(shù)實(shí)現(xiàn)React表單提交中實(shí)現(xiàn)防抖功能吧2024-01-01
React中實(shí)現(xiàn)keepalive組件緩存效果的方法詳解
由于react官方并沒有提供緩存組件相關(guān)的api（類似vue中的keepalive），在某些場景，會(huì)使得頁面交互性變的很差。所以本文為大家介紹了React中實(shí)現(xiàn)keepalive組件緩存效果的方法，希望對大家有所幫助2023-01-01
每天一個(gè)hooks學(xué)習(xí)之useUnmount
這篇文章主要為大家介紹了每天一個(gè)hooks學(xué)習(xí)之useUnmount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
本篇文章主要介紹了webpack3+React 的配置全解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了React中的Context應(yīng)用場景分析,Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過組件樹的逐層傳遞 props，通過實(shí)例代碼給大家介紹使用步驟，感興趣的朋友跟隨小編一起看看吧2021-06-06
react中實(shí)現(xiàn)將一個(gè)視頻流為m3u8格式的轉(zhuǎn)換
這篇文章主要介紹了react中實(shí)現(xiàn)將一個(gè)視頻流為m3u8格式的轉(zhuǎn)換方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了React?classnames原理及測試用例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12