React:嵌套onclick也会触发parent

Question

我使用光滑旋转木马的反应版本来制作像旋转木马一样的Netflix.您可以单击图块,然后展开该图块以显示该图块的详细信息.

例:

由于Slicks处理动态高度的能力,这非常有效.我想在展开的部分添加一个关闭按钮(如最右边所示).但这就是我遇到问题的地方.

如果我添加一个带有onClick处理程序的关闭按钮,它将始终触发显示扩展部分的父Onclick.

showExpanded onclick函数只是设置了showDetails状态.

所以我的问题是:

如何通过单击关闭按钮来设置状态,而不会触发包装父级.

我尝试了event.preventDefault()和event.stopPropagation()但是没有做到这一点.

Tile click看起来像这样:

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

Answer 1

甲click事件本质上是一个的结果mousedown事件后,通过mouseup在相同的元素时,其可以围绕传播即使stopPropagation上调用click事件.

一种解决方案是将其打开mousedown; 最简单的形式:

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

Answer 2

对我有用的解决方案是event.stopPropagation()在你的孩子onClick方法中打电话.这将阻止父母被调用.