简介
操纵Document Object Model （DOM）而不触发React中的组件重新渲染的一种方法是使用useRef hook。在本文中，我将useref挂钩切换密码输入可见性。
本文针对React初学者开发人员，对React库有基本的了解。读者将学习如何使用USEREF切换密码字段可见性。
大纲
- useref概念
- 使用USEREF
- 使用USEREF 切换密码
- 结论
useref概念
React documentation 将USEREF定义为一个挂钩，使您可以引用不需要的值。这是用于访问DOM的内置钩子。它不会触发组件的重新渲染。 USEREF是顶级组合。您使用其当前属性访问USEREF持有的价值。
使用useref
import React,{useRef} from 'react';
function TogglePassword(){
const inputRef= useRef(initialValue)
}
在上面的代码示例中，我从react中导入了useref，并以初始值初始化了它。该值可以是字符串，int或对象。为了访问useref值，我使用了其当前属性，如下所示。
const refValue= inputRef.current
使用USEREF
切换密码
我使用UESREF访问DOM以实现切换密码效果。在下面的代码示例的第4行中，我将USEREF的初始值设置为null。
1 import React,{useRef,useState} from 'react';
2 import {FaEyeSlash,FaEye} from 'react-icons/fa'
3 function TogglePassword(){
4 const inputref= useRef(null)
5 const [iconState,setIcon]=useState(false)
6 const handleClick=()=>{
7 const inputattr=inputref.current.getAttribute('type')
8 inputattr==="password" ? inputref.current.setAttribute('type', 'text'): inputref.current.setAttribute('type', 'password')
9 iconState ? setIcon(false) : setIcon(true)
}
10 let icon;
11 if(iconState){
icon=<FaEyeSlash />
}
12 else{
icon=<FaEye />
}
13return(
<>
14<div>
15 <p>Email</p>
16 <input type='text' id="email" />
17 </div>
18 <div>
19 <p>Password</p>
20 <input ref={inputref} type='password' id="pwd" />
21 <span onClick={handleClick}>{icon}</span>
22 </div>
</>
)
}
24 export default TogglePassword;
在第5行中，我使用Usestate Hook初始化了IconState的false来跟踪密码可见性。我在第6行中创建了HandleClick函数，以通过查看眼图上的单击事件来切换密码可见性。在togglePassword组件的JSX中，第20行，我使用InputRef保留对密码输入的引用。在第7行中，我使用inputref.current属性访问输入类型属性。如果输入类型属性是密码，则使用第8行中的三元运算符将类型设置为“文本”，反之亦然。在第9行中，我将IconState转换为True或false。第10行，我声明了一个可变图标，并根据IconState分配了眼部组件或眼斜线组件。
结论
在文章中，我演示了USEREF的用法，并展示了它如何访问DOM。现在，读者应该更好地了解useref以及如何使用它来访问DOM。
找到本文教育，评论，喜欢和分享。