React技巧之获取元素类名
总览
在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);
};声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。
