快捷導(dǎo)航

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

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

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

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}>點擊</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}

此時點擊按鈕，發(fā)現(xiàn)無法正確拿到MyInput組件中的input元素，并且控制臺報錯。因為MyInput函數(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}>點擊</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}

但上述寫法會將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}>點擊</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}

再次點擊，可以發(fā)現(xiàn)只有focus會觸發(fā),背景色不會修改且控制臺會有提示。

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

您可能感興趣的文章:

相關(guān)文章

使用React.forwardRef傳遞泛型參數(shù)
這篇文章主要介紹了使用React.forwardRef傳遞泛型參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
React Electron生成桌面應(yīng)用過程
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-12-12
react性能優(yōu)化達(dá)到最大化的方法 immutable.js使用的必要性
這篇文章主要為大家詳細(xì)介紹了react性能優(yōu)化達(dá)到最大化的方法，一步一步優(yōu)化react性能的過程，告訴大家使用immutable.js的必要性，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
React 實現(xiàn)表單組件的示例代碼
本文主要介紹了React 實現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗證,錯誤信息展示,表單提交,動態(tài)表單元素等功能,具有一定的參考價值,感興趣的可以了解一下
2024-07-07
React?中的?setState?是同步還是異步
這篇文章主要介紹了React?中的?setState?是同步還是異步，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-06-06
在React中使用SVG的幾種方式
在React中,SVG（Scalable?Vector?Graphics）的使用非常普遍,因為它們提供了可伸縮的矢量圖形,這對于現(xiàn)代Web應(yīng)用來說是非常重要的,以下是幾種常見的在React中使用SVG的方法,每種方法都有其特定的用例和最佳實踐,需要的朋友可以參考下
2024-11-11
詳解react使用react-bootstrap當(dāng)輪子造車
本篇文章主要介紹了詳解react使用react-bootstrap當(dāng)輪子造車，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-08-08
react中實現(xiàn)修改input的defaultValue
這篇文章主要介紹了react中實現(xiàn)修改input的defaultValue方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
React Grid Layout基礎(chǔ)使用示例教程
React Grid Layout是一個用于在React應(yīng)用程序中創(chuàng)建可拖拽和可調(diào)整大小的網(wǎng)格布局的庫,通過使用React Grid Layout,我們可以輕松地創(chuàng)建自適應(yīng)的網(wǎng)格布局,并實現(xiàn)拖拽和調(diào)整大小的功能,本文介紹了React Grid Layout的基礎(chǔ)使用方法,感興趣的朋友一起看看吧
2024-02-02
React?props全面詳細(xì)解析
props?是?React?組件通信最重要的手段，它在?React?的世界中充當(dāng)?shù)慕巧鞘种匾?。學(xué)好?props?可以使組件間通信更加靈活，同時文中會介紹一些?props?的操作技巧，和學(xué)會如何編寫嵌套組件
2022-10-10