javascript - 为什么在禁用为真时不 react 禁用 onClick 处理程序？

Question

我希望在 React 组件上设置禁用属性会阻止该元素的 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 属性没有删除处理程序？抱歉造成任何混淆。

Answer 1

问题不在于 disabled ;它与 HTML 元素 a 一起使用.主播<a>不能有 disabled 属性(那是什么意思？)。仅仅因为您已经通过 CSS 使元素看起来像一个按钮，并不能使它成为一个按钮。它仍然是一个 anchor 。

解决方案是使用其他东西(如按钮):

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

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

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