如何在React中处理多个DIVs的click evet？

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      // 处理click事件的逻辑
      console.log('Div clicked:', event.target);
    };

    const divs = document.getElementsByClassName('my-div');
    for (let i = 0; i < divs.length; i++) {
      divs[i].addEventListener('click', handleClick);
    }

    // 清除事件绑定
    return () => {
      for (let i = 0; i < divs.length; i++) {
        divs[i].removeEventListener('click', handleClick);
      }
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行一次

  return (
    <div>
      <div className="my-div">Div 1</div>
      <div className="my-div">Div 2</div>
      <div className="my-div">Div 3</div>
    </div>
  );
};

export default MyComponent;