Реакция: Вложенная onclick также вызывает родительский

Question

Я использовал реактивную версию пятнистой карусели, чтобы сделать Netflix подобной карусели. Вы можете щелкнуть по плитке, и эта плитка затем расширится, чтобы показать детали этой плитки.

Пример:

Это прекрасно работает благодаря способности слики для обработки динамических высот. Я хочу добавить закрытую кнопку в расширенный раздел (как видно в крайнем правом углу). Но именно там у меня проблема.

Если я добавлю кнопку закрытия с обработчиком 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 nt на том же элементе, который может распространяться вокруг, даже если stopPropagation вызывается на событие click.

Одно из решений - позвонить по телефону mousedown; в своей простейшей форме:

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

Answer 2

Решение, которое работало для меня было место вызова event.stopPropagation() в методе ребенка onClick. Это предотвратит вызов родителя.