为什么在禁用为真时不反应禁用 onClick 处理程序？

Question

我希望在反应组件上设置禁用属性会阻止该元素的 onClick 处理程序。

  <a role="button"
        className={`btn btn-block btn-info`}
        disabled={!this.state.readyToView}
        href={this.state.selectedObjectLink}
        onClick={this.handleLink}
        >View</a>

但是尽管该元素显示了“已禁用”属性，它仍然会注册一个点击事件。

编辑：我应该澄清一下——我在 handleLink 中处理点击事件，我想知道为什么 disabled 属性没有删除处理程序？抱歉造成任何混乱。

原文由 Liz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题不在于 disabled ；它与 HTML 元素 a 。锚点 <a> 不能有 disabled 属性（那是什么意思？）。仅仅因为您已经通过 CSS 使元素看起来像一个按钮，并不能使它成为一个按钮。它仍然是一个锚点。

解决方案是使用其他东西（如按钮）：

 <button
  role="button"
  className={`btn btn-block btn-info`}
  disabled={!this.state.readyToView}
  onClick={this.handleLink}
>
  View
</button>

你可以使用 this.state.selectedObjectLink 里面 handleLink 如果你想重定向到一个页面

或者使用此页面上的许多其他建议之一。

原文由 Kousha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为什么不在 handleLink 中处理这个问题？

 handleLink () {
  if (!this.state.readyToView) return
  // ...
}

如果你真的想动态绑定/删除处理程序，你可以这样做：

 const clickHandler = this.state.readyToView ? this.handleLink : null
...
<a role="button"
  ...
  ...
  onClick={clickHandler}
>View</a>

原文由 CodinCat 发布，翻译遵循 CC BY-SA 3.0 许可协议