React按钮修改disabled为false后onClick点击事件不触发是什么原因？

• React采用合成事件机制，所有事件监听统一挂载在文档顶层，触发事件时会先基于React内部维护的虚拟DOM属性状态做校验。你直接通过ref修改真实DOM的disabled属性，没有同步更新React内部的虚拟DOM状态，React仍然判定该按钮为禁用状态，因此会拦截onClick合成事件的执行。
• 你当前代码中setTimeout未设置清理逻辑，组件提前卸载时会触发内存泄漏，属于附加的可优化点。

优先使用React状态控制disabled属性，保证虚拟DOM和真实DOM状态一致，是符合React设计规范的标准实现：

const Component = () => {
  // 声明state管理按钮禁用状态
  const [isDisabled, setIsDisabled] = React.useState(true)
  const handleClick = () => console.log('clicked')

  React.useEffect(() => {
    const timer = setTimeout(() => {
      // 修改state触发React同步更新属性
      setIsDisabled(false)
    }, 1000);
    // 组件卸载时清理定时器避免内存泄漏
    return () => clearTimeout(timer)
  }, [])

  return (
    <div>
      <button onClick={handleClick} disabled={isDisabled}>click me</button>
    </div>
  )
}

ReactDOM.render(
  <Component />,
  document.getElementById("root")
);

配套的HTML部分无需修改：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果你有特殊场景必须直接操作DOM修改禁用属性，可以用原生事件绑定绕过React合成事件的校验，该方案仅作为兜底使用，不推荐常规场景使用：

const Component = () => {
  const refrence = React.useRef(null)
  React.useEffect(() => {
    // 原生绑定点击事件
    const handleNativeClick = () => console.log('clicked')
    refrence.current.addEventListener('click', handleNativeClick)

    const timer = setTimeout(() => {
      refrence.current.disabled = false
    }, 1000);

    // 卸载时清理定时器和事件绑定
    return () => {
      clearTimeout(timer)
      refrence.current.removeEventListener('click', handleNativeClick)
    }
  }, [])

  return (
    <div>
      <button ref={refrence} disabled>click me</button>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者ProMaker Dev