React中初始设置disabled=true的按钮启用后onClick不生效问题

最常见原因：直接操作DOM修改disabled属性，未使用React状态同步 #

如果你的按钮启用逻辑是直接操作原生DOM修改属性，比如：

// 错误写法
document.getElementById('saveButton').disabled = false

这种写法会导致React虚拟DOM和真实DOM状态不同步，React内部维护的事件绑定机制会认为按钮仍然是禁用状态，不会触发绑定的onClick事件。

正确写法：用React状态控制disabled属性 #

import { useState } from 'react'

// 组件内声明状态
const [isSaveDisabled, setIsSaveDisabled] = useState(true)

// 其他事件触发时修改状态
const handleOtherEvent = () => {
  // 你的业务逻辑
  setIsSaveDisabled(false)
}

// 渲染按钮时绑定状态
<div className='button-parent'>
    <button 
      id="saveButton" 
      type="button" 
      onClick={updateBill} 
      disabled={isSaveDisabled} 
      className="button"
    >
      Save
    </button>
</div>

其他可能原因及排查方向 #

• 检查按钮CSS是否设置了pointer-events: none：很多禁用态样式会加这个属性，如果启用按钮时没有同步修改该属性为auto，按钮会无法接收任何点击事件，直接修改对应样式即可。
• 检查是否有其他元素遮挡按钮：打开浏览器开发者工具的元素选择器，点击按钮位置，确认选中的元素是#saveButton本身，如果选中的是其他层级更高的元素，调整对应元素的z-index属性即可。
• 检查按钮是否存在重复渲染导致的事件绑定丢失：可以给按钮添加固定的key属性（如key="save-button"），避免React在重渲染时生成新的DOM节点导致事件绑定失效。

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