ReactJS 从子状态 onClick 处理程序设置父状态

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>
    )
  }
});

打开灯箱工作正常，但我在关闭灯箱时设置状态时遇到问题。由于某些原因，this.setState实际上并没有将状态设置为 false，在调用 setState 后它仍然设置为 true。

我是不是漏掉了什么？我有一个 fiddle 和一些例子 here

Answer 1

问题是您的 openLightbox() 方法在 closeLightbox() 调用之后立即被调用，因此状态改变了两次：display 设置为 false 然后返回到true。这是因为你有两个 onClick 处理程序，它们重叠。

最简单的解决方法是将 e.stopPropagation() 放入您的 closeLightbox() 方法中。

ReactJS 从子状态 onClick 处理程序设置父状态

ReactJS setting parent state from child state onClick handler

reactjs

react-jsx