ReactJS從子狀態設置父狀態onClick處理程序

Question

我目前正在學習ReactJS，我正在嘗試創建一個簡單的Lightbox。我有三個名爲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> 
    ) 
    } 
}); 

打開燈箱工作正常，但我有在關閉燈箱設置狀態的問題。出於某種原因，this.setState實際上並沒有將狀態設置爲false，它在調用setState之後仍然設置爲true。

我在這裏錯過了什麼嗎？我有一些例子here

Answer 1

的問題是，你的openLightbox()方法獲取closeLightbox()調用後立即召開了一個小提琴，所以狀態變化兩次：display被設置爲false然後回到true。這是因爲您有兩個onClick處理程序，它們重疊。

最簡單的修復方法是將e.stopPropagation()放入您的closeLightbox()方法中。