ステートチェンジ後にonClickイベントを登録するには？

Question

私はこのような外部ライブラリアンからjavascriptのイベントを持っている：私はそれをクリックすると

this.flky.on('staticClick', (e) => { this.setState({mobileZoom: true}) 

、画像を拡大します：

<img onClick={this.state.zoom &&() => {this.setState({mobileZoom: false}}} 
style={...this.state.mobileZoom && {position: 'absolute', top: 0, left: 0, width: 'auto', zIndex: 1070}} 
/> 

これは、デスクトップ上で動作しますが、モービル、onClickの上フルスクリーンの画像もまたトリガされ、画像がちょうどちらつき、再び消滅します。

私が遅れ追加する場合、それは動作します：

this.flky.on('staticClick', (e) => { 
    setTimeout(() => { this.setState({mobileZoom: true}) }, 100) 
) 

を私はクリックイベントが異なるデバイスに続くどのくらいは考えているので、これは持続可能な解決策と悪い習慣ではありません。より良い方法がありますか？

Answer 1

あなたはonClickでタイプミスを持っているように見えます：

<img onClick={this.state.mobileZoom &&() => {this.setState({mobileZoom: false}}} 
style={...this.state.mobileZoom && {position: 'absolute', top: 0, left: 0, width: 'auto', zIndex: 1070}} 
/> 

Answer 2

あなたは一例としてeventさらに

this.flky.on('staticClick', (e) => { 
    if (event.stopPropagation){ //checking browser support 
     event.stopPropagation(); 
    }else{ 
     window.event.cancelBubble = true; 
    } 
    this.setState({mobileZoom: true}); 
) 

をバブリング停止する

function inside(e){ 
 
    e.stopPropagation(); 
 
    alert('you clicked inside'); 
 
} 
 

 
function outside(e){ 
 
    alert('you clicked ouside'); 
 
}

<div onclick="outside(event)"> 
 
    Outside 
 
    <div onclick="inside(event)">Inside</div> 
 
</div>

を event.stopPropagation()を使用することができます