当禁用为真时,为什么不响应禁用onClick处理程序？

Question

我希望在react组件上设置disabled属性会阻止该元素的onClick处理程序.

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

但是虽然元素显示"禁用"属性,但它仍然会注册一个click事件.

编辑:我应该澄清 - 我在handleLink中处理click事件,我想知道为什么disabled属性不会删除处理程序？对不起任何困惑.

Answer 1

为什么不直接处理handleLink呢？

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

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

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

Answer 2

问题不在于disabled; 它与HTML元素有关a.Anchor <a>不能拥有禁用的属性(这甚至意味着什么？).仅仅因为你已经通过CSS使元素看起来像一个按钮,不会使它成为一个按钮.它仍然是一个锚.

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

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

如果要重定向到页面,可以this.state.selectedObjectLink在内部使用handleLink

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

Answer 3

您可以在点击处理程序中添加一个条件，就像这样

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

提琴手