2017-07-18 17 views
1

である私はステートレスで、それは親コンポーネントは、条件が真

<div onClick={() => handleClick()}><div> 

の両方で使用されているコンポーネントに私はだけそれらのいずれかのハンドルのクリック機能を追加する必要がきたときに、再利用可能なステートレスなコンポーネントでクリック扱い反応します。私はそれを担当する変数を1つ持っています。 shouldHandleClick。

は、だから私のような何かを書く必要があるが、それは小道具、文字列などなどと例のために働く

<div {shouldHandleClick ? onClick={() => handleClick()} : null}><div>

あなたはそれ以外の場合は、私がdoesn`第二成分にクリックし処理する任意のアイデアを持っていますかトン、これは機能

答えて

1

<div onClick={this.props.shouldHandleClick ? this.handleClick : null}><div>

そして、クリック機能を有効または無効にする小道具でshouldHandleClickを送信をクリック扱う必要があります。

+0

は三項演算子でコンテキストとすることができ何が間違っ 'this' –

+0

コンテキストには注意してください? – Andrew

+0

'this.handleClick'はイベントリスナーから呼び出されます。あなたが 'this'をハンドラに直接バインドしていないと、問題を引き起こす可能性があります。 –

1

あなたはほとんどそこにいるように見えます:

<div onClick={shouldHandleClick ? handleClick : null}></div> 
関連する問題