2017-12-26 11 views
2

こんにちは私は誰かがdivをクリックするとdivを持っています。それはちょうどdrawerのようなhide/showを切り替えるだけです。ボタンをクリック可能にするにはどうすればいいですか(ボタンをクリックして機能を実行する必要がありますが、引き出しは切り替えるべきではありません)。 `zIndexが動作しない引き出しの中でボタンをクリックできるようにしますか?

<div onClick={this.toggleDiv.bind(this, "divid")} > 
    <div> 
     <div className="hide" id="divid" style={{zIndex: "1"}}> 
      <br /> 
      <button onClick={this.divRemainShowAndAlertHi(this, plateInfo)}> 
       click me 
      </button> 
      <br/> 
     </div> 
    </div> 
</div> 


divRemainsShowAndAlertHi(){ 
    alert('Hi button click is working but drawer does not slides') 
} 


toggleDiv(id){ 
    // just hide/show logic 
    const plateclass = document.getElementById(id); 
    const changedclass = plateclass.className == 'show' ? 'hide' : 'show'; 
    plateclass.setAttribute('class', changedclass); 
} 

答えて

2

ボタンをクリックしたときにクリックイベントのためのPropagationを停止する必要があります。また、あなたはまた、直接DOM要素を変更しないでください、それはあなたが上記をご確認の代わりに、直接DOMを変更してはならない状態

state = { 
    visibleModel: '' 
} 

// In render 
<div onClick={this.toggleDiv.bind(this, "divid")} > 
    <div > 
    <div className={this.state.modelState === "divid" ? "show": "hide"} id="divid" style={{zIndex: "1"}}> 
     <br /> 
     <button onClick={this.divRemainShowAndAlertHi.bind(this, plateInfo)}>click me</button> 
     <br/> 
    </div> 

    </div> 
</div> 

// Function implementation 
toggleDiv(id){ 
    this.setState({visibleModel: id}); 
} 
+0

を使用してように反応するか、ここのonClickでonClick={this.divRemainShowAndAlertHi.bind(this, plateInfo)}

<div onClick={this.toggleDiv.bind(this, "divid")} > <div > <div className="hide" id="divid" style={{zIndex: "1"}}> <br /> <button onClick={this.divRemainShowAndAlertHi.bind(this, plateInfo)}>click me</button> <br/> </div> </div> </div> divRemainsShowAndAlertHi(info, e){ e.stopPropagation(); alert('Hi button click is working but drawer does not slides') } 

bindを逃しましたクラスをトグルする実装。それに対する答えを更新しました –

関連する問題