React技巧之获取元素类名
React技巧之获取元素类名
原文链接：https://bobbyhadz.com/blog/react-get-class-name-of-element[1]
作者：Borislav Hadzhiev[2]
正文从这开始~
总览
在React中，获取元素的类名：
- 在元素上设置
ref属性，或者使用事件处理函数。 - 如果使用
ref，通过ref.current.className来访问类名。 - 如果使用事件处理，通过
event.currentTarget.className来访问类名。
import {useEffect, useRef} from 'react';
export default function App() {
const ref = useRef(null);
useEffect(() => {
console.log('className 👉️', ref.current.className);
// 👇️ check if element contains class
if (ref.current.classList.contains('my-class')) {
console.log('Element contains class');
} else {
console.log('Element does NOT contain class');
}
}, []);
const handleClick = event => {
console.log('className 👉️', event.currentTarget.className);
// 👇️ check if element contains class
if (event.currentTarget.classList.contains('my-class')) {
console.log('Element contains class');
} else {
console.log('Element does NOT contain class');
}
};
return (
<div>
<div ref={ref} className="my-class" onClick={handleClick}>
Hello world
</div>
</div>
);
}
上面的代码片段向我们展示了，当组件挂载或者事件被触发时，如何获取元素的类名。
ref
useRef()钩子可以传递一个初始化作为参数。该钩子返回一个可变ref对象，其.current属性被初始化为传递的参数。
请注意，我们必须访问
ref对象的current属性，以获得对我们设置ref属性的div元素的访问。
当我们为元素传递ref属性时，比如说，<div ref={myRef} /> 。React将ref对象的.current属性设置为相应的DOM节点。
我们传递一个空的依赖数组到useEffect钩子上，所以它只会在组件挂载时运行。
useEffect(() => {
console.log('className 👉️', ref.current.className);
// 👇️ check if element contains class
if (ref.current.classList.contains('my-class')) {
console.log('Element contains class');
} else {
console.log('Element does NOT contain class');
}
}, []);
我们使用className属性，以编程方式来获取元素的类名。
event
如果你需要当事件触发时来获取元素的类名，可以使用event.currentTarget.className 。
我们在div元素上设置onClick属性，所以每当元素被点击时，handleClick就会被调用。
const handleClick = event => {
console.log('className 👉️', event.currentTarget.className);
// 👇️ check if element contains class
if (event.currentTarget.classList.contains('my-class')) {
console.log('Element contains class');
} else {
console.log('Element does NOT contain class');
}
};
需要注意的是，我们在
event上使用了currentTarget属性，因为我们想访问事件监听器所连接的元素。
event的target属性给了我们一个对触发事件的元素的引用（可以是一个后代）。
这意味着，如果你需要访问实际被点击的元素的类名，而不是事件监听器所连接的元素，你可以使用target属性来代替。
const handleClick = event => {
console.log('className 👉️', event.target.className);
};
参考资料
[1]
https://bobbyhadz.com/blog/react-get-class-name-of-element: https://bobbyhadz.com/blog/react-get-class-name-of-element
[2]
Borislav Hadzhiev: https://bobbyhadz.com/about
腾讯云开发者
