使按钮可在抽屉内点击？

Question

Hi I have a div when someone clicks on the div it just toggles hide/show like a drawer If the drawer is in show state it has a button. How to make the button clickable ie (If someone clicks on the button it's function should execute but the drawer should not toggle) below is my code any idea !! `zIndex in not working

<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);
}

Answer 1

You need to stopPropagation for the click event when clicked on the button. Also you missed bind in onClick here 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')
}

Also don't modify the DOM element directly, do it the React way by using state

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});
}