Почему не отрабатывает 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, время: 04:31. |