React：嵌套的 onclick 也会触发父级答案

【问题标题】：React: Nested onclick also triggers parentReact：嵌套的 onclick 也会触发父级
【发布时间】：2016-10-28 11:33:52
【问题描述】：

我使用了光滑轮播的 react 版本来制作类似 Netflix 的轮播。您可以单击一个图块，然后该图块会展开以显示该图块的详细信息。

例子：

这要归功于 Slicks 处理动态高度的能力。我想在展开部分添加一个关闭按钮（如最右侧所示）。但这就是我有问题的地方。

如果我添加一个带有 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>
  );

【问题讨论】：

已添加，感谢您的帮助！
e.stopPropagation() 应该在这些情况下解决问题。有时，如果没有，对mousedown 执行相同的操作也应该减少它。
所以我应该用mousedown代替onclick？还是两者都做？
不，我的意思是值得一试听mousedown 只是打电话给stopPropagation。
成功了！！多么奇怪但美妙！非常感谢！

标签： javascript reactjs slick.js

【解决方案1】：

对我有用的解决方案是在您的孩子onClick 方法中调用event.stopPropagation()。这将阻止调用父级。

【讨论】：

【解决方案2】：

click 事件本质上是 mousedown 事件后跟同一元素上的 mouseup 事件的结果，即使在 click 事件上调用 stopPropagation 也可以传播。

一种解决方案是在mousedown 上也调用它；最简单的形式：

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

【讨论】：