Как обрабатывать события Hover в React
9 января 2024 г.В этом руководстве вы узнаете, как обрабатывать события наведения — одно из наиболее распространенных взаимодействий пользователя в веб-приложениях.
onHover в React
В библиотеке нет встроенного события onHover, но есть способ обрабатывать события наведения в React.
Чтобы реализовать эту функцию, вам нужны два обработчика событий: onMouseEnter для обработки, когда мышь входит в границы элемента, и onMouseLeave для обработки, когда мышь покидает границы. Обработка этих двух событий гарантирует согласованную работу обработчика событий наведения.
Теперь давайте рассмотрим потенциальные варианты использования onHover в React.
В нашем первом примере давайте установим обработчики onMouseEnter и onMouseLeave, чтобы показывать или скрывать компонент, когда пользователь наводит на него курсор.
function App() {
const [hidden, setHidden] = useState(true);
return (
<div
className="container"
onMouseEnter={() => setHidden(false)}
onMouseLeave={() => setHidden(true)}
>
{hidden ? null : <h1>Hovering</h1>}
</div>
);
}
В этом примере у нас есть переменная состояния hidden, и ее значение является логическим. Внутри JSX мы смотрим на логическое значение, чтобы условно отобразить заголовок с надписью «Hovering».
Обработчики событий onMouseEnter и onMouseLeave устанавливаются в элементе div. Событие onMouseEnter устанавливает для hidden значение false, поэтому текст заголовка отображается. onMouseLeave устанавливает для него значение true, поэтому, когда мышь покидает div, текст заголовка снова скрывается.
Вот живая демонстрация. иллюстрируют, как onMouseEnter и onMouseLeave могут копировать обработчик событий onHover в React.
-
Как видите, эффект наведения активируется, даже если указатель мыши находится на границе элемента.
Если вам понравилось это руководство, в блоге SimpleFrontEnd есть множество похожих руководств по React с примерами.
onHover для условного оформления элементов в React
Подобно условному рендерингу вы можете использовать обработчики событий onMouseEnter и onMouseLeave для условного оформления элементов в React.
Если быть более конкретным, обработчики событий обновляют состояние, которое мы можем использовать для условного применения стилей в JSX.
function App() {
const [warning, setWarning] = useState(true);
return (
<div
className="container"
onMouseEnter={() => setWarning(false)}
onMouseLeave={() => setWarning(true)}
>
<h1 style={{ color: warning ? "goldenrod" : "green" }}>
Please hover over the container{" "}
</h1>
</div>
);
}
В этом примере обработчики событий onMouseEnter и onMouseLeave обновляют переменную состояния warning. Который мы используем для изменения цвета текста в контейнере.
Вы также можете рассматривать это как программную альтернативу использованию селектора :hover в CSS.
Оригинал