反应:悬停时的奇怪行为

时间:2017-03-22 08:36:31

标签: javascript reactjs

我是React的新手,并为练习制作了一个小型“推文盒”应用。有些奇怪的事我不明白......

用户可以将图片添加到推文中。图像作为对象存储在数组中,并通过循环和运行renderThumb()方法呈现。在图像悬停时,我在图像的右上角显示一个小的“删除图标”。单击时,图像将被删除。

  1. 当我悬停图像时,所有图像显示都悬停(图标在所有图像上都可见)。为什么呢?

  2. renderThumb()在悬停时执行。为什么? (只应在渲染图像时执行。)

  3. 我使用this.state.images.filter( (img) => { return img.id != image.id; } );删除图片。但它不起作用。为什么呢?

  4. //谢谢, 奥莱

    TweetBox.js

    import React, {Component, PropTypes} from 'react';
    import './tweetbox.css';
    
    import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
    
    import TextArea from './TextArea';
    
    class TweetBox extends Component {
    
        numPhotoChars = 17;
        numStartChars = 140;
        author = 'Ole Frank Jensen';
        counter = 0;
        imageUrl = 'http://i.imgur.com/Crcz7dJ.jpg';
    
        constructor(props) {
            super(props);
    
            this.state = {
                text: '',
                author: this.author,
                date: 0,
                startValue: this.numStartChars,
                images: []
            };
    
            this.onTextareaChange = this.onTextareaChange.bind(this);
            this.getNumRemainingChars = this.getNumRemainingChars.bind(this);
            this.disableTextarea = this.disableTextarea.bind(this);
            this.addImage = this.addImage.bind(this);
            this.removeImage = this.removeImage.bind(this);
            this.submitTweet = this.submitTweet.bind(this);
            this.onMouseOver = this.onMouseOver.bind(this);
            this.onMouseOut = this.onMouseOut.bind(this);
    
        }
    
        onTextareaChange(e) {
            this.setState({text: e.target.value});
        }
    
        getNumRemainingChars() {
            return this.state.startValue - this.state.text.length;
        }
    
        disableTextarea() {
            return this.state.text.length > 0 || this.state.images.length;
        }
    
        addImage() {
            if (this.getNumRemainingChars() >= this.numPhotoChars) {
                const startValue = this.state.startValue - this.numPhotoChars;
                const image = Object.assign({}, {
                    id: this.counter += 1,
                    url: this.imageUrl
                });
    
                this.setState({startValue: startValue});
                this.setState({images: [...this.state.images, image]});
            }
        }
    
        removeImage(image) {
    
            let arr = this.state.images.filter( function(img) { return img.id != image.id; } );
            console.log(image, arr);
    
            this.setState({
                images: this.state.images.filter( function(img) { return img.id != image.id; } ),
                startValue: this.state.startValue + this.numPhotoChars,
                hover: false
            });
        }
    
        submitTweet(e) {
            e.preventDefault();
    
            // compose
            const tweet = {
                text: this.state.text,
                author: this.state.author,
                date: new Date().getTime(),
                images: this.state.images
            };
    
            // store
            this.props.storeTweet(tweet);
    
            // reset
            this.setState({
                text: '',
                images: [],
                startValue: this.numStartChars
            });
        }
    
        onMouseOver() { console.log('over'); this.setState({hover: true}); }
        onMouseOut() { console.log('out'); this.setState({hover: false}); }
    
        renderThumb(image, index) {
            console.log(index);
            let k = 'image-' + index;
            return (
                <div key={k} className="col-xs-3">
                    <div className="thumbnail-wrapper">
                        <img src={image.url}
                             alt="My something"
                             className="img-thumbnail"
                             onMouseOver={ this.onMouseOver }
                             onMouseOut={ this.onMouseOut }/>
                        <div className={"img-thumbnail-close-btn " + (this.state.hover ? 'show' : 'hidden')}
                             onMouseOver={ this.onMouseOver }
                             onMouseOut={ this.onMouseOut }
                             onClick={ () => { this.removeImage({image}) } }>
                            <span className="fa-stack fa-1x">
                                <i className="fa fa-circle fa-stack-2x white-background"></i>
                                <i className="fa fa-circle-thin fa-stack-2x black-border"></i>
                                <i className="fa fa-times fa-stack-1x"></i>
                            </span>
                        </div>
                    </div>
                </div>
            );
        }
    
        render() {
            return (
                <div className="tweet-box">
                    <div className="row">
                        <div className="col-xs-6 col-xs-offset-3">
                            <div className="well tweet-box clearfix">
    
                                <h1>Tweet Box</h1>
    
                                <TextArea value={ this.state.text }
                                          maxLength={this.state.startValue}
                                          onChange={this.onTextareaChange}/>
                                <span className="pull-right">
                                    <em>{this.getNumRemainingChars()} characters left...</em>
                                </span>
    
                                <br/>
    
                                <div className="row">
                                    <ReactCSSTransitionGroup transitionName="example"
                                                             transitionEnterTimeout={500}
                                                             transitionLeaveTimeout={500}>
                                        {
                                            this.state.images.map((image, index) => {
                                                return this.renderThumb(image, index);
                                            })
                                        }
                                    </ReactCSSTransitionGroup>
                                </div>
    
    
                                <br/>
    
                                <div className="row">
                                    <div className="col-xs-6">
                                        <button className="btn btn-default add-photo pull-left"
                                                onClick={this.addImage}>
                                            <i className="fa fa-camera"></i> Add photo
                                        </button>
                                    </div>
                                    <div className="col-xs-6">
                                        <button onClick={this.submitTweet} className="btn btn-primary pull-right"
                                                disabled={!this.disableTextarea()}>
                                            <i className="fa fa-pencil-square-o"></i> Tweet!
                                        </button>
                                    </div>
                                </div>
    
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
    
    }
    
    TweetBox.propTypes = {
        storeTweet: PropTypes.func.isRequired
    };
    
    export default TweetBox;
    

1 个答案:

答案 0 :(得分:2)

您的州是一般的,ID建议您在每张图片上添加ID。并添加一个接受该id的处理程序。这样您就可以仅更改特定图像的悬停。

this.setState({hover: true})

你可以在下面看到你正在为所有图像添加相同的处理程序, 所以一个图像悬停将导致他们全部被徘徊。

<img src={image.url}
  alt="My something"
  className="img-thumbnail"
  onMouseOver={ this.onMouseOver }
  onMouseOut={ this.onMouseOut }/>