为何使用useRef启用按钮后onClick事件仍无法正常工作？

你的代码里点击事件失效的核心问题是：组件初始渲染时，DOM还没挂载，buttonRef.current是null，直接在组件顶层调用setAttribute不仅会报错，而且DOM挂载后也不会重新执行这段逻辑，导致按钮状态未被正确更新。

下面是两种可行的解决方式：

方式一：用React状态直接控制（推荐） #

这是React的标准写法，完全不需要操作DOM ref，更符合框架的渲染逻辑：

function App() {
  const name = 'Pilla';
  // 根据条件直接计算按钮是否禁用
  const isDisabled = name !== 'Pilla';

  const handleButtonClick = () => {
    console.log('Button clicked!');
  };

  return (
    <button disabled={isDisabled} onClick={handleButtonClick}>
      Click Me
    </button>
  );
}

方式二：用useRef + useEffect（仅特殊场景使用） #

如果一定要用ref操作DOM，必须通过useEffect确保DOM挂载后再执行操作，同时监听条件变化：

import { useRef, useEffect } from 'react';

function App() {
  const buttonRef = useRef(null);
  const name = 'Pilla';

  useEffect(() => {
    // 确保ref指向真实DOM后再操作
    if (buttonRef.current) {
      // 直接操作DOM元素的disabled属性，比setAttribute更可靠
      buttonRef.current.disabled = name !== 'Pilla';
    }
  }, [name]); // 当name变化时，重新更新按钮状态

  const handleButtonClick = () => {
    console.log('Button clicked!');
  };

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

内容的提问来源于stack exchange，提问作者Aditya Varma