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，然后返回{{ 1}}。这是因为你有两个true处理程序，它们重叠。

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

ReactJS从子状态onClick处理程序

1 个答案: