快捷導(dǎo)航

react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom

更新時(shí)間：2023年10月18日 15:15:22 作者：田本初

這篇文章主要介紹了react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

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)無(wú)法正確拿到MyInput組件中的input元素，并且控制臺(tái)報(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全部暴露出來(lái)，導(dǎo)致在其他組件中，可以對(duì)該元素進(jìn)行任意操作，如果僅想對(duì)外提供某些功能，需要修改為如下寫法：

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ì)修改且控制臺(tái)會(huì)有提示。

到此這篇關(guān)于react中利用useRef、forwardRef、useImperativeHandle獲取并處理dom的文章就介紹到這了,更多相關(guān)react useRef、forwardRef、useImperativeHandle獲取dom內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

react中實(shí)現(xiàn)修改input的defaultValue
這篇文章主要介紹了react中實(shí)現(xiàn)修改input的defaultValue方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
react配置px轉(zhuǎn)換rem的方法
這篇文章主要介紹了react配置px轉(zhuǎn)換rem的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
ReactNative項(xiàng)目OpenHarmony三方庫(kù)集成實(shí)戰(zhàn)指南:react-native-calendar-even
文章介紹了react-native-calendar-events庫(kù),這是一個(gè)強(qiáng)大的日歷事件庫(kù),支持讀寫系統(tǒng)日歷,實(shí)現(xiàn)日程管理功能,文章說(shuō)明了其安裝配置、核心功能、API使用方法,并提供了注意事項(xiàng)和完整示例,適用于React Native開發(fā)中的日歷事件管理,感興趣的朋友一起看看吧
2026-04-04
React實(shí)現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖（Debounce）技術(shù)可以有效地限制函數(shù)在短時(shí)間內(nèi)的頻繁調(diào)用,下面我們就來(lái)看看如何使用Lodash庫(kù)中的debounce函數(shù)實(shí)現(xiàn)React表單提交中實(shí)現(xiàn)防抖功能吧
2024-01-01
React中實(shí)現(xiàn)keepalive組件緩存效果的方法詳解
由于react官方并沒有提供緩存組件相關(guān)的api（類似vue中的keepalive），在某些場(chǎng)景，會(huì)使得頁(yè)面交互性變的很差。所以本文為大家介紹了React中實(shí)現(xiàn)keepalive組件緩存效果的方法，希望對(duì)大家有所幫助
2023-01-01
每天一個(gè)hooks學(xué)習(xí)之useUnmount
這篇文章主要為大家介紹了每天一個(gè)hooks學(xué)習(xí)之useUnmount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
webpack3+React 的配置全解
本篇文章主要介紹了webpack3+React 的配置全解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
React中的Context應(yīng)用場(chǎng)景分析
這篇文章主要介紹了React中的Context應(yīng)用場(chǎng)景分析,Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過(guò)組件樹的逐層傳遞 props，通過(guò)實(shí)例代碼給大家介紹使用步驟，感興趣的朋友跟隨小編一起看看吧
2021-06-06
react中實(shí)現(xiàn)將一個(gè)視頻流為m3u8格式的轉(zhuǎn)換
這篇文章主要介紹了react中實(shí)現(xiàn)將一個(gè)視頻流為m3u8格式的轉(zhuǎn)換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
React?classnames原理及測(cè)試用例
這篇文章主要為大家介紹了React?classnames原理及測(cè)試用例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12