获取 React 中元素的类名

作者

在 React 中获取元素的类名

Get the Class name of an element in React

在 React 中获取元素的类名：

  1. 在元素上设置refprop 或使用事件处理函数。
  2. 如果使用 ref，访问类名作为ref.current.className.
  3. 如果使用事件处理程序，则访问类名作为
    event.currentTarget.className.
应用程序.js
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>
  );
}

代码片段展示了如何在组件挂载或触发事件时获取元素的类名。

useRef ()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的div元素。 ref

当我们将 ref prop 传递给元素时，例如<div ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因此它只会在组件安装时运行。

应用程序.js
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.currentTarget.className.

我们onClick在元素上设置了 prop div，所以每次点击它时，
handleClick都会调用它的函数。

应用程序.js
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');
  }
};
请注意，我们currentTarget在事件上使用了该属性，因为我们想要访问事件侦听器附加到的元素。

上的target属性event为我们提供了对触发事件的元素的引用（可能是后代）。

这意味着如果您需要访问实际单击的元素的类名，而不是事件侦听器附加到的元素的类名，您将使用该target属性。

应用程序.js
const handleClick = event => {
  console.log('className 👉️', event.target.className);
};

–

发表评论