Почему не отрабатывает onMouseOver?
Задача: вывести при наведении всех пользователей, которые родились в этом месяце. Переменная меняет значение в функции onHover, которая вызывается методом onMouseOver Пробовал и без использования .bind, ошибка не перестает преследовать:
TypeError: Cannot read property 'onHover' of undefined Как пофиксить функцию onHover? Заранее спасибо! https://jsfiddle.net/kw12ab94/ |
Цитата:
В самой функции вы пытаетесь изменить значение константы 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 |
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
}
|
Цитата:
|
| Часовой пояс GMT +3, время: 17:53. |