web-dev-qa-db-ja.com

ReactでDIV onClickを無効にする最良の方法

OnClickおよびaria-disabledプロパティを受け入れるdivを持つコンポーネントがあります。どちらも小道具として提供され、無効はオプションです。私のrenderメソッドでは、次のことを行います。

<div onClick={!this.props.Disabled ? this.props.Click : undefined} 
     aria-disabled={this.props.Disabled>My Div</div>

CSSを使用して無効状態を視覚化します（不透明度：0.5、ポインターイベント：なし何とか何とか）。しかし、実際のonClickを処理するためのより良い方法があるかどうか疑問に思います。これは必須の小道具なので、アイテムが無効になっていても、条件を満たすためにonClickを渡す必要があります。これについてより良い方法はありますか？

javascripthtmlcssreactjs
3
ZeroDarkThirty

直感は正しいと思います。変更する小道具に基づいて常にイベントハンドラーを追加および削除するのは理想的ではありません。単純に関数をラップして、必要に応じて返すのはどうですか？例えば。

<div onClick={(e) => !this.props.Disabled && this.props.Click(e)}
  aria-disabled={this.props.Disabled>
    My Div
</div>

警備員&&はifロジックの省略形です。

1
jpsimons

buttonの方が適しているかもしれません。 button要素を使用すると、onClick値がtrueの場合、disabledは自動的に起動しません。だからあなたはできる：

<button onClick={this.props.Click} disabled={this.props.Disabled}>My button</button>

また、div上のボタンを使用することのアクセシビリティの利点も得られます。

ボタンが無効になっているときにクリックプロップが「余分」であるという事実には何の問題もありません。無効状態に基づいて、渡されたプロップの構造を変更するよりも良いと思います。

0
yts