onClick在重新渲染后第一次单击时不起作用

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [isEnabled, setIsEnabled] = useState(true);

  useEffect(() => {
    // 确保在状态更新后重新绑定事件处理程序
    const handleClick = () => {
      console.log('Clicked!');
    };

    if (isEnabled) {
      document.getElementById('myButton').addEventListener('click', handleClick);
    } else {
      document.getElementById('myButton').removeEventListener('click', handleClick);
    }

    return () => {
      document.getElementById('myButton').removeEventListener('click', handleClick);
    };
  }, [isEnabled]);

  return (
    <div>
      <button id="myButton">Click Me</button>
      <button onClick={() => setIsEnabled(!isEnabled)}>Toggle Enable</button>
    </div>
  );
};

export default MyComponent;

import React from 'react';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default MyComponent;

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Clicked!');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

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

  return (
    <div>
      <button ref={buttonRef}>Click Me</button>
    </div>
  );
};

export default MyComponent;