как дифференцировать элементы в React

Question

У меня есть несколько изображений, которые мне нужно немного увеличить (используя CSS, т.е. transform : scale(1.2);) на onMouseEnter и вернуться к onMouseLeave. У меня есть код ниже, который работает.

CSS: -

.style {
    transform : scale(1.2);
    transition: transform .5s ease-out;
}

.shrink {
    transform : scale(1);
    transition: transform .5s ease-out;
}

Переменная, объявленная в конструкторе: -

this.state = { 
            isHovered: false
        };

JS Метод: -

handleHover(){
        this.setState({
            isHovered: !this.state.isHovered
        });
    }

логическая операция в методе рендеринга: -

const imgClass = this.state.isHovered ? 'profile-pic style' : 'profile-pic shrink';

и два изображения: -

   <Image title ='one' src="pics/pic1.png" circle className={imgClass}  
    onClick={ () => this.props.methodRef('one')} height="70" width="100"     
onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}/>

     <Image title ='two' src="pics/pic2.png" circle className={imgClass}  
    onClick={ () => this.props.methodRef('two') } height="70" width="100"     
onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}/>

Этот код работает отлично, как я и ожидал. Но проблема в том, что оба изображения увеличиваются и уменьшаются одновременно.

Как я могу различить движение мыши по различным элементам в ReactJ.

Answer 1

Вы можете заключить компоненты Image в один из ваших собственных, которыми вы можете управлять и добавлять состояния. Или, возможно, другим способом было бы иметь массив в родительском компоненте, например:

state: {
    images:[{id: "image1", isHovered: false},
            {id:"image2", isHovered: false}]
}

Так что вы можете иметь свои идентификаторы в компонентах:

<Image id={this.state.images[0].id} ...rest />

затем handleHover:

handleHover(e) => {
    const images = [...this.state.images]; //copy your array
    const index = images.findIndex(el => (el.id === e.target.id));
    images[index].isHovered = !images[index].isHovered;
    this.setState({images});
}

Хотя это слишком сложно. Вы должны обернуть его внутри другого компонента и оттуда управлять состоянием.