無効になっているときにonClickハンドラを無効にするのはなぜですか？

Question

反応コンポーネントのdisabled属性を設定すると、その要素のonClickハンドラがブロックされることが予想されます。

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

ただし、要素には「無効」属性が表示されますが、それでもクリックイベントが登録されます。

編集：私は明らかにする必要があります - handleLinkでclickイベントを処理しますが、無効な属性がハンドラを削除しない理由を知りたいのですが？混乱を招いて申し訳ありません。

Answer 1

問題がdisabledではありません。それはHTML要素aです。アンカー<a>には無効なプロパティを設定することはできません（その意味は？）。要素をボタンのように見せるためにCSSを渡したからといって、ボタンにしないでください。それはまだアンカーです。

ソリューションは、どちらかになります（ボタンのような）何か他のものを使用する：

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

ページへ

をリダイレクトするか、他の多くの候補の1つを使用したい場合は、handleLink内this.state.selectedObjectLinkを使用することができますこのページで

Answer 2

あなたは、あなたのクリックハンドラでちょうどhandleLinkでこれを扱えないのはなぜこの

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

jsfiddle

Answer 3

のようなものが条件を追加することができますか？

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

あなたが本当にバインド/動的ハンドラを削除したい場合は、あなたがこのような何かを行うことができます。

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