ReactJS установка родительского состояния из дочернего состояния onClick handler

Question

В настоящее время я изучаю ReactJS, и я пытаюсь создать простой Лайтбокс. У меня есть три компонента: ThumbnailContainer, Thumbnail и Lightbox. Как показано ниже:

var ThumbnailContainer = React.createClass({ 
    render: function(){ 
    var thumbnails = this.props.thumbnail_data 
    var thumbnail_list = thumbnails.map(function(thumbnail){ 
    console.log(thumbnail); 
     return <Thumbnail key={thumbnail.id} post={thumbnail}/> 
    }); 

    return (
     <div id="thumbnail-container"> 
    {thumbnail_list} 
     </div> 
    ); 
    } 
}); 

var Thumbnail = React.createClass({ 
    getInitialState: function(){ 
    return { 
     display: false 
    }; 
    }, 
    openLightbox: function(e){ 
    e.preventDefault(); 
    this.setState({display: true}); 
    }, 
    closeLightbox: function(e){ 
    this.setState({display: false}); 
    }, 
    render: function(){ 
    var post = this.props.post; 
    return (
     <div className="post" onClick={this.openLightbox}> 
      <img className="post-image" src={post.image} /> 
      { this.state.display ? <Lightbox image={post.image} closeHandler={this.closeLightbox}/> : null} 
     </div> 
    ); 
    } 
}); 

var Lightbox = React.createClass({ 
    render: function(){ 
    var image = this.props.image 
    return (
     <div> 
      <div className="lightbox-background" onClick={this.props.closeHandler}></div> 
      <div className="lightbox-content" onClick={this.props.closeHandler}> <img src={image} /></div> 
     </div> 
    ) 
    } 
}); 

Открытие Lightbox работает нормально, но у меня возникли проблемы с установкой состояния на закрытии Lightbox. По какой-то причине this.setState фактически не устанавливает состояние в false, оно по-прежнему установлено в true после вызова setState.

Я что-то упустил? У меня есть скрипка с некоторыми примерами here

Answer 1

Проблема заключается в том, что ваш метод openLightbox() вызывается сразу после closeLightbox() вызова, поэтому изменения состояния дважды: display получает значение false затем обратно в true. Это связано с тем, что у вас есть два обработчика onClick, и они перекрываются.

Самый простой способ - установить e.stopPropagation() в ваш метод closeLightbox().