数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究ReactJS – useRef Hook
在本文中，我们将了解如何在函数式组件中创建任何 DOM 元素的引用。
此 Hook 用于访问组件中的任何 DOM 元素，并且将返回一个可变的 ref 对象，只要该组件被放置在 DOM 中，它就会一直存在。
如果我们向任何 DOM 元素传递一个 ref 对象，那么每当节点更改时，将向相应的 DOM 节点元素添加 .current 属性。
语法
const refContainer = useRef(initialValue);
示例
在此示例中，我们将构建一个 React 应用程序，将 ref 对象传递给两个输入字段。
当单击某个按钮时，它将自动获取这些输入字段的数据。
App.jsx
import React, { useRef } from 'react';
function App() {
const email = useRef(null);
const username = useRef(null);
const fetchEmail = () => {
email.current.value = '[email protected]';
email.current.focus();
};
const fetchUsername = () => {
username.current.value = 'RahulBansal123';
username.current.focus();
};
return (
<>
<div>
<h1>Tutorialspoint</h1>
</div>
<div>
<input placeholder="Username" ref={username} />
<input placeholder="Email" ref={email} />
</div>
<button onClick={fetchUsername}>Username</button>
<button onClick={fetchEmail}>Email</button>
</>
);
}
export default App;在上面的示例中，当单击用户名或电子邮件按钮时，将分别调用 fetchUsername 和 fetchEmail 函数，它们将 ref 对象传递给输入字段，并将其值从 NULL 更改为某些文本。
输出
这将产生以下结果。
更新日期：2021 年 3 月 19 日
533 次浏览
广告