Question

我使用光滑旋转木马的反应版本来制作像旋转木马一样的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>
  );

Answer 1

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

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

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

Answer 2

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

React：嵌套onclick也会触发parent

2 个答案: