如何在React中使用e.target使用EventListener而不是其子元素来记录元素

import React, { useEffect } from 'react';

function ListComponent() {
  const listRef = React.useRef(null);

  useEffect(() => {
    const handleClick = (e) => {
      if (e.target.closest('li')) {
        console.log('Clicked on:', e.target.textContent);
      }
    };

    const currentRef = listRef.current;
    currentRef.addEventListener('click', handleClick);

    return () => {
      currentRef.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <ul ref={listRef}>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}

export default ListComponent;

return () => {
  currentRef.removeEventListener('click', handleClick);
};

if (e.target.closest('li')) {
  // 处理逻辑
}