反应：嵌套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也触发父母

回答

相关问题