反應：嵌套onclick也觸發父母

我使用光滑傳送帶的反應版本使Netflix像旋轉木馬一樣。您可以單擊一個圖塊，然後該圖塊將展開以顯示該圖塊的詳細信息。反應：嵌套onclick也觸發父母

例子：

此十分感謝浮油處理動態高度能力的作品。我想添加一個關閉按鈕的擴大部分（如右圖所示）。但那是我遇到問題的地方。

如果我使用onClick處理程序添加關閉按鈕，它將始終觸發顯示展開的部分的父級Onclick。

showExpanded onclick函數只是設置showDetails狀態。

所以我的問題是：

我如何可以通過點擊關閉按鈕，也沒有觸發包裝家長設置的狀態。

我試過event.preventDefault（）和event.stopPropagation（），但沒有成功。

瓷磚點擊看起來是這樣的：

expandTile(){ 
    this.setState({ 
    showDetails: true, 
    closeTile: false 
    }); 
}

關閉按鈕點擊功能，因爲我有現在：

closeTile(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 
    const showDetails = this.state.showDetails; 
    if(showDetails){ 
     this.setState({ 
     showDetails: false, 
     closeTile: true 
     }); 
    } 
}

更新：增加了JSX：

return (
    <div className={s.itemPreWrapper} key={`${el.title}-item-${index}`}> 
     <div className={`${s.item} ${showDetails ? s.showDetails : ''}`} 
      onClick={self.state.expandItem} 
      data-index={index} 
     <div className={s.itemCaret}></div> 
     <div className={s.imgWrapper}> 
      <img src={el.itemImage}/> 
     </div> 
     <div className={s.overlay}> 
      {el.title} 
     </div> 
     <div className={s.expandedTile} style={{left: '-'+offset+'px'}}> 
      <div className={s.etItem}> 
      <div key={`subitem-${index}`} ref="subItem"> 
      <div className="row"> 
       <div className={`${s.etClose}`} onClick={self.state.closeTile}><span></span></div> 
       <div className="col-xs-12 col-sm-3"> 
       <div className={`${s.etImage}`}> 
        <img src={el.itemImage} alt="product image" className="img-responsive"/> 
       </div> 
       </div> 
       <div className="col-xs-12 col-sm-9"> 
       <div className="row"> 
        <div className={`${s.etContent} col-xs-12 col-sm-6 col-lg-8`}> 
        <h2>{itemTitle}</h2> 
        <p> {el.description}</p> 
        </div> 
        <div className={`${s.etMedia} col-xs-12 hidden-sm col-sm-5 col-lg-3`}> 
        {media} 
        </div> 
       </div> 
      </div> 
      <div className="col-xs-12 col-md-11"> 
       {optionsElem} 
      </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
);

來源

2016-10-28 jansmolders86

把更多的代碼，你分配的事件，html結構等.. – mikepa88

我們還需要看到你的jsx以及 –

添加它，謝謝你的幫助！ – jansmolders86

一個click事件基本上是mousedown事件後跟mouseup前夕的結果nt放在同一個元素上，即使stopPropagation在click事件上被調用，它也可以傳播。

一種解決方案是在mousedown上調用它;以最簡單的形式：

<div onMouseDown={e => e.stopPropagation()} ... />

來源

2016-10-28 12:49:48

爲我工作的解決方案是地方event.stopPropagation()呼叫你的孩子onClick方法。這將阻止父母被調用。

來源

2017-07-07 23:22:17

反應：嵌套onclick也觸發父母

回答

相關問題