Как различать элементы в React
У меня есть несколько изображений, которые мне нужно немного увеличить (с помощью 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}/>
Этот код работает отлично, как я и ожидал. Но проблема в том, что оба изображения увеличиваются и уменьшаются одновременно.
Как я могу различать движения мыши по разным-разным элементам в ReactJs.
Я попытался удалить запятую, но без изменений. Он по-прежнему ведет себя так же. Но спасибо за неправильный код.
вам нужно переместить состояние handleHover и isHovered внутри компонента изображения, таким образом их внутренний isHovered изменится, и только одно изображение будет увеличено. Сейчас вы используете одно и то же состояние для обоих изображений, поэтому оба изображения увеличиваются.
Изображение - это один из компонентов, предоставляемых React. Я не создавал этот Компонент.
@Jaikrat Image - один из компонентов, предоставляемых React. Любая ссылка? Для меня это будет новым открытием, так как в react предоставляет компонент под названием Image.
Конечно ... у меня есть один импорт вроде ... import { Image} from 'react-bootstrap';
Ах, рад знать. Вы уже не упомянули, что это реакция-бутстрап.
@Jaikrat Можешь хоть раз попробовать: {() => this.handleHover()}
@BhojendraRauniyar. Нет, оба изображения увеличиваются и уменьшаются одновременно.
@Jaikrat Я не смог найти никаких проблем с вашим кодом, вы можете попробовать использовать консоль, что там происходит ..
В консоли нет ничего плохого ... кроме предупреждения, связанного с неиспользованным импортом. Я знаю, что мой код неправильный ... Я разделяю одну переменную между элементами.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете обернуть компоненты изображения в один из своих, которым вы можете управлять и добавлять состояния. Или, может быть, другим способом было бы иметь массив в родительском компоненте, например:
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});
}
Однако это слишком сложно. Вы должны обернуть его внутри другого компонента и управлять состоянием оттуда.
Не требуется. Нет проблем с использованием одного состояния.
Я думаю, оба изображения увеличиваются, потому что он использует одно и то же состояние для обоих. Неважно, какое изображение он наводит, оба следят за одним состоянием isHovered, и оба изображения переключают классы.
Я сказал: Нет. Не требуется. Это компонент, а не элемент. Компонент начальной загрузки.
Здесь я не согласен. Если только isHovered не является внутренним состоянием компонента, о котором мы не знаем. Затем ему нужно более одного состояния для переключения классов.
You should wrap it inside another component and manage state from there. => Ага.
Правильно ли вы задаете имена классов?
profile-pic, styleдолжен быть без запятой, верно? Если это так, и имена классов установлены, он будет работать отлично