数据结构
网络
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 次浏览
广告