迹忆客 专注技术分享

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

获取元素的类名：

1. 将元素上的 onClick 属性设置为事件处理函数。
2. 访问元素的类名作为 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}
      >
        jiyik.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 获取元素的类名

这是一个两步过程：

1. 在元素上设置 ref 属性。
2. 访问类名作为 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}>
        jiyik.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');
  }
}, []);

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

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

最后一步是使用 className 属性以编程方式获取元素的类名。