Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Почему не отрабатывает onMouseOver? (https://javascript.ru/forum/css-html/79224-pochemu-ne-otrabatyvaet-onmouseover.html)

Vlad Kopernikov 09.01.2020 21:36

Почему не отрабатывает onMouseOver?
 
Задача: вывести при наведении всех пользователей, которые родились в этом месяце. Переменная меняет значение в функции onHover, которая вызывается методом onMouseOver Пробовал и без использования .bind, ошибка не перестает преследовать:
TypeError: Cannot read property 'onHover' of undefined
Как пофиксить функцию onHover? Заранее спасибо!

https://jsfiddle.net/kw12ab94/

Malleys 09.01.2020 23:50

Цитата:

Сообщение от Vlad Kopernikov
TypeError: Cannot read property 'onHover' of undefined

У вас функция объявлена как — onHover, но вы её почему-то пытаетесь вызвать как this.onHover.

В самой функции вы пытаетесь изменить значение константы usersVisible! (Тогда уж следовало объявить
const [usersVisible, setUsersVisible] = React.useState(false);
и использовать
onMouseOver={() => setUsersVisible(true)}
onMouseOut={() => setUsersVisible(false)}
) Но такой скрипт работает только с мышкой и к тому же показывает при наведении мышкой всех пользователей всех месяцев!

Я рекомендую вам не использовать usersVisible. Вместо этого используйте возможности CSS. Т. е. вам тогда следует удалить onMouseOver, onHover, заменить
{n.users.map(
								user =>
									usersVisible ? (
										<div key={user.id}>
											<div>
												<h4 className={classes.userId}>user #{user.id}</h4>
												данные пользователя...
											</div>
										</div>
									) : null
							)}
на
{n.users.map(user => <div key={user.id}>
    <div>
        <h4 className={classes.userId}>user #{user.id}</h4>
        данные пользователя...
    </div>
</div>)}
и объявить CSS (оберните пользователей в <section>)
#months h2 + section {
	display: none;
}
#months:hover h2 + section {
	display: block;
}



Кстати! Объявите начальное состояние так...
const [users, setUser] = React.useState([]);
и вам не придётся писать так...
users &&
		users.reduce(

Вот исправленный пример со всем тем, о чём я говорил... https://codepen.io/Malleys/pen/YzPaOjy?editors=0010

рони 10.01.2020 00:44

Malleys,
почему n.users, а не n.users.length?
className={
							n.users > 0
								? classes.month.grey
								: n.users > 2 ? classes.blue : n.users > 6 ? classes.green : classes.red
						}

Malleys 10.01.2020 00:57

Цитата:

Сообщение от рони
почему n.users, а не n.users.length?

Очевидно, что Vlad Kopernikov не умеет работать с длиной массивов (исправил!), а я больше сосредоточился на onHover (из которого следовало, что автор не понимает смысл константы и состояния компонента в React!)


Часовой пояс GMT +3, время: 09:03.