获取 React 中元素的类名

React 2月前 42

在 React 中使用 event.target 获取元素的类名

获取元素的类名：

将元素上的 onClick 属性设置为事件处理函数。
访问元素的类名作为 event.currentTarget.className。

export default function App() {
  const handleClick = event => {
    console.log('className 👉️', event.currentTarget.className);

    if (event.currentTarget.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  };

  return (
    <div>
      <div
        className="my-class second-class"
        onClick={handleClick}
      >
        zadmei.com
      </div>
    </div>
  );
}

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

const handleClick = event => {
  console.log('className 👉️', event.currentTarget.className);

  if (event.currentTarget.classList.contains('my-class')) {
    console.log('Element contains class');
  } else {
    console.log('Element does NOT contain class');
  }
};

我们可以通过 event.currentTarget.className 属性访问 handleClick 函数中元素的类名。

请注意 ，我们在事件上使用了 currentTarget 属性，因为我们想要访问事件侦听器附加到的元素。

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

如果我们需要访问实际单击的元素的类名，而不是事件侦听器附加到的元素的类名，则可以使用 target 属性。

const handleClick = event => {
  console.log('className 👉️', event.target.className);
};

在 React 中使用 ref 获取元素的类名

这是一个两步过程：

在元素上设置 ref 属性。
访问类名作为 ref.current.className。

import {useEffect, useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  useEffect(() => {
    console.log('className 👉️', ref.current.className);

    if (ref.current.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  }, []);

  return (
    <div>
      <div className="my-class second-class" ref={ref}>
        zadmei.com
      </div>
    </div>
  );
}

代码示例使用 ref 在组件安装时获取元素的类名。

useRef() 钩子可以传递一个初始值作为参数。

const ref = useRef(null);

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

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

useEffect(() => {
  console.log('className 👉️', ref.current.className);

  if (ref.current.classList.contains('my-class')) {
    console.log('Element contains class');
  } else {
    console.log('Element does NOT contain class');
  }
}, []);