在抽屉内点击一个按钮？

Question

嗨我有一个div当有人点击div它只是切换隐藏/显示像drawer如果抽屉处于显示状态它有一个按钮。如何使按钮可点击，即（如果有人点击按钮它的功能应执行，但抽屉不应切换）下面是我的代码任何想法！ `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);
}

Answer 1

单击按钮时，您需要为click事件停止传播。你也错过了点击这里bind的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')
}

也不要直接修改DOM元素，使用状态执行React方式

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