React Component State не работает
Я пытался реализовать эффект наведения на элемент div, как в этом коде: https://codesandbox.io/s/XopkqJ5oV
Компонент, в котором я хочу это сделать, представляет собой компонент многократного использования, который используется несколько раз на одной странице. Полагаю, это причина, по которой я не могу заставить его работать. Что мне не хватает?
Даже использование приведенного выше кода не будет работать в моем приложении.
РЕДАКТИРОВАТЬ: Спасибо за ответы. Я нашел проблему:
Я не давал знать ShouldComponentUpdate, он должен учитывать state.isHovering.
shouldComponentUpdate(nextProps, nextState) {
return (
nextProps.post.id !== this.props.post.id ||
nextProps.screenshotClickUrl !== this.props.screenshotClickUrl ||
nextProps.onImageClick !== this.props.onImageClick ||
nextProps.handleMouseHover !== this.props.handleMouseHover ||
nextState.isHovering !== this.state.isHovering
)
}
обновленная песочница для вас - codeandbox.io/s/qq47zm53vq
@Rikin pastebin.com/Tb54MV9f Вот и все. Это мой код!
Можете ли вы сделать рабочий пример в stackblitz, который воспроизводит вашу проблему. Вы пробовали console.info в handleMouseHover и смотрели, запускается ли он при наведении курсора на нужный элемент?
Поскольку @ZoltanToth имеет в своем коде ссылку, просто используйте ее таким же образом вместо написания логики наведения в компоненте ImagePost. Пусть ImagePost обрабатывает сообщения Post, а HoverComponent обрабатывает данные, связанные с наведением курсора. Разделение озабоченности.
Вопросы должны стоять сами по себе; нам не нужно заходить на внешние сайты, чтобы понять и / или ответить на вопрос.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам не хватает this в:
toggleHoverState(state) {
return {
isHovering: !state.isHovering // Need a "this" to access state.
};
}
Если вы сложите элементы слишком близко друг к другу, это будет мешать событиям входа / выхода мыши, например, если вы разнесете их:
const Foo = () => {
return (
<div>
<HoverExample />
<div style = {{height: '2em', border: '1px solid blue'}} />
<HoverExample />
</div>
)
}
это работает, как (я думаю) вы ожидаете.
https://codesandbox.io/s/93l25m453o
Я обводил его рамками, чтобы визуализировать проблему.
Если это не имеет смысла, посмотрите, что произойдет, если у вас будет индикатор наведения в соседнем диапазоне, а не в стеке:
https://codesandbox.io/s/5k5jj3rpok
Однако @mowtheone shouldComponentUpdate не имеет отношения к вашему исходному коду. Если это относится к было, то образец кода должен лучше отражать реальную проблему.
это ваш код в CodeSandbox? Если это так, он уже работает. Если нет, то где твой код? Вы пробовали console.info в функции привязки событий и смотрели, запускаются ли события? Я обновил метод рендеринга, чтобы повторно использовать тот же компонент, и он работает, что, вероятно, имитирует то, о чем вы просите.
render(<div><HoverExample /><br/><HoverExample /></div>, document.getElementById('root'));