chuckQu

V1

2022/06/22阅读:40主题:凝夜紫

React技巧之获取元素类名

原文链接:https://bobbyhadz.com/blog/react-get-class-name-of-element[1]

作者:Borislav Hadzhiev[2]

正文从这开始~

总览

在React中,获取元素的类名:

  1. 在元素上设置ref属性,或者使用事件处理函数。
  2. 如果使用ref,通过ref.current.className来访问类名。
  3. 如果使用事件处理,通过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属性,因为我们想访问事件监听器所连接的元素。

eventtarget属性给了我们一个对触发事件的元素的引用(可以是一个后代)。

这意味着,如果你需要访问实际被点击的元素的类名,而不是事件监听器所连接的元素,你可以使用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

分类:

前端

标签:

React.js

作者介绍

chuckQu
V1