資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究ReactJS – useImperativeHandle 鉤子
在本文中，我們將瞭解如何自定義 ref 物件的例項值。
useImperativeHandle 和 useRef 鉤子都允許傳遞 ref 物件，但是後者不允許自定義也透過 ref 物件傳遞的例項。useImperativeHandle 鉤子與 useRef 鉤子在兩個主要方面不同 −
它允許顯式地處理和自定義返回值。
它允許使用自定義例項替換 ref 物件的本機例項。
語法
useImperativeHandle(ref, createHandle, [deps])
示例
在本例中，我們將構建一個自定義的 Button 元件，它具有附加到 ref 物件的使用者定義例項。
Button 元件是 App 元件的子元件。
Button.js
import React, { useRef, useImperativeHandle, forwardRef } from 'react';
function Button(props, ref) {
const btn = useRef();
useImperativeHandle(ref, () => ({
blur: () => {
console.log('Custom Blur property is called');
},
}));
return (
<button ref={btn} {...props}>
Click Here
</button>
);
}
export default forwardRef(Button);App.jsx
import React, { useRef } from 'react';
import Button from './Button';
const App = () => {
const btn = useRef(null);
return (
<div>
<button onClick={() => btn.current.blur()} ref={btn} />
</div>
);
};
export default App;單擊“單擊此處”按鈕時，它將呼叫附加到傳遞的 ref 物件的使用者定義的 blur 函式。
輸出
這將產生以下結果。
更新於： 19-3-2021
827 次瀏覽
廣告