Компонент withFocusOutside — это высокоуровневый компонент (Higher-Order Component) для React, предоставляемый WordPress, который позволяет отслеживать потерю фокуса элемента и реагировать на это событие. Это полезно для создания пользовательских интерфейсов, где важно отследить уход фокуса, например, в модальных окнах, выпадающих списках и других интерактивных элементах.
В отличие от стандартного события blur, которое срабатывает при переходе фокуса на другой элемент в том же контексте, withFocusOutside определяет, ушел ли фокус по-настоящему, что позволяет избежать ложных срабатываний.
Основы использования withFocusOutside
Для использования withFocusOutside необходимо:
- Обернуть компонент с помощью
withFocusOutside. - Определить метод
handleFocusOutsideв классе компонента для обработки событий ухода фокуса.
Примечание: withFocusOutside используется только с классами компонентов, а не с функциональными компонентами.
Пример 1: Реакция на потерю фокуса в текстовых полях
В этом примере создадим компонент с несколькими текстовыми полями, который будет выводить сообщение в консоль при потере фокуса, но только если фокус действительно ушел с элемента.
Шаг 1: Импортируем необходимые компоненты
import { withFocusOutside, TextControl } from '@wordpress/components';
import React from 'react';
Шаг 2: Создаем компонент с обработкой события ухода фокуса
Здесь метод handleFocusOutside выведет сообщение в консоль, когда фокус уходит с элемента.
const MyComponentWithFocusOutside = withFocusOutside(
class extends React.Component {
handleFocusOutside() {
console.log('Фокус ушел за пределы компонента');
}
render() {
return (
<div>
<TextControl label="Поле 1" onChange={() => {}} />
<TextControl label="Поле 2" onChange={() => {}} />
</div>
);
}
}
);
Описание работы
Метод handleFocusOutside вызывается только при настоящем уходе фокуса с обоих полей. Если фокус перемещается между полями, этот метод не сработает, предотвращая ложные срабатывания.
Пример 2: Применение withFocusOutside для скрытия модального окна
В следующем примере создадим простое модальное окно, которое автоматически закроется при уходе фокуса с него.
Шаг 1: Создаем компонент модального окна
import { withFocusOutside, Button } from '@wordpress/components';
import React from 'react';
class ModalComponent extends React.Component {
handleFocusOutside() {
// При уходе фокуса закрываем модальное окно
this.props.onClose();
}
render() {
return (
<div style={{ border: '1px solid #333', padding: '20px' }}>
<p>Это модальное окно</p>
<Button variant="primary" onClick={this.props.onClose}>
Закрыть
</Button>
</div>
);
}
}
const ModalWithFocusOutside = withFocusOutside(ModalComponent);
Шаг 2: Используем модальное окно с логикой ухода фокуса
В компоненте, управляющем отображением модального окна, добавляем метод onClose для закрытия окна.
function App() {
const [isModalOpen, setModalOpen] = React.useState(false);
const openModal = () => setModalOpen(true);
const closeModal = () => setModalOpen(false);
return (
<div>
<Button variant="primary" onClick={openModal}>
Открыть модальное окно
</Button>
{isModalOpen && <ModalWithFocusOutside onClose={closeModal} />}
</div>
);
}
Теперь, если пользователь щелкнет за пределами модального окна или переведет фокус на другой элемент, сработает метод handleFocusOutside, и модальное окно закроется.
Пример 3: Отслеживание ухода фокуса в меню
В этом примере реализуем раскрывающееся меню, которое будет скрываться при уходе фокуса с него.
Шаг 1: Создаем компонент раскрывающегося меню
class DropdownMenu extends React.Component {
handleFocusOutside() {
this.props.onClose();
}
render() {
return (
<div style={{ border: '1px solid #ccc', padding: '10px' }}>
<p>Это меню</p>
<Button variant="secondary" onClick={this.props.onClose}>
Закрыть меню
</Button>
</div>
);
}
}
const DropdownWithFocusOutside = withFocusOutside(DropdownMenu);
Шаг 2: Добавляем меню в основной компонент и логику для открытия и закрытия
function App() {
const [isMenuOpen, setMenuOpen] = React.useState(false);
const openMenu = () => setMenuOpen(true);
const closeMenu = () => setMenuOpen(false);
return (
<div>
<Button variant="primary" onClick={openMenu}>
Открыть меню
</Button>
{isMenuOpen && <DropdownWithFocusOutside onClose={closeMenu} />}
</div>
);
}
Теперь меню будет закрываться, когда пользователь кликнет или переведет фокус за пределы меню.
Рекомендации по использованию withFocusOutside
- Используйте только для классовых компонентов: Этот HOC предназначен исключительно для классовых компонентов, так как требует метод
handleFocusOutside. - Контроль модальных окон и меню:
withFocusOutsideидеально подходит для управления модальными окнами и выпадающими элементами, чтобы закрывать их, когда фокус уходит. - Обработка событий ухода фокуса: Метод
handleFocusOutsideможет содержать любые действия, которые необходимо выполнить, когда фокус теряется, например, сохранение данных, отправка уведомлений или закрытие UI-компонента.
Заключение
Компонент withFocusOutside в WordPress предоставляет разработчикам мощный способ управления поведением интерфейсов на основе событий ухода фокуса. Будь то модальные окна, выпадающие списки или другие интерактивные элементы, этот компонент помогает создавать более удобные и интуитивно понятные интерфейсы для пользователей.