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

У меня мало изображений, которые мне нужно немного увеличить (используя CSS ie 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
        });
    }

логический op в способе рендеринга: -

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}/>

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

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

javascript,reactjs,jsx,

0

Ответов: 1

2

Вы можете обернуть компоненты 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});
}

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

JavaScript, reactjs, JSX,
Похожие вопросы
Яндекс.Метрика