React中如何让disabled状态的button触发onClick点击事件

原生HTML的disabled属性会完全屏蔽元素的所有交互事件，无法直接触发onClick，可以通过以下两种方案实现需求：

方案1：替换原生disabled属性为自定义禁用态（推荐） #

放弃使用原生disabled，改为用CSS模拟禁用视觉效果，在逻辑层控制交互行为：

1. 调整按钮代码，移除原生disabled属性，新增自定义类名控制样式：

<button 
  type="button" 
  onClick={saveHandler} 
  className={`save-btn ${disabled ? 'is-disabled' : ''}`}
>
  Save
</button>

2. 添加CSS模拟禁用态视觉效果，注意不要加pointer-events: none，否则会屏蔽点击事件：

.save-btn.is-disabled {
  opacity: 0.6;
  background-color: #e5e7eb;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

3. 调整saveHandler逻辑，先判断表单状态再执行对应操作：

const saveHandler = () => {
  // 原禁用条件成立时，触发全量表单校验，展示所有字段错误
  if (disabled) {
    // 调用你自己的表单全量校验方法，比如antd的form.validateFields，或者自定义遍历所有字段校验的逻辑
    triggerAllFormValidation()
    return
  }
  // 表单校验通过时执行正常保存逻辑
  submitForm()
}

方案2：在外层容器绑定点击事件 #

如果必须保留原生disabled属性，可以给按钮套一层父容器，把点击事件绑定在父容器上，利用事件冒泡机制触发校验逻辑：

1. 调整按钮结构：

<div className="save-btn-wrapper" onClick={handleWrapperClick}>
  <button 
    type="button" 
    onClick={saveHandler} 
    disabled={disabled}
  >
    Save
  </button>
</div>

2. 给父容器添加样式避免误触：

.save-btn-wrapper {
  display: inline-block;
}

3. 编写父容器点击事件逻辑：

const handleWrapperClick = () => {
  // 只有按钮处于禁用状态时才触发全量校验
  if (disabled) {
    triggerAllFormValidation()
  }
}

注意事项 #

• 方案1的灵活度更高，是前端表单场景的主流实现方案
• 触发全量校验后，需要把所有字段的「是否展示错误」的状态标记设为true，才能让所有未填字段的错误提示正常展示

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