Пользователи ожидают, что диалоги, листы действий, оповещения, ящики и другие всплывающие окна закроются при нажатии кнопки на спине. Это особенно верно на Android (где кнопка «Назад» глобально доступна во всех приложениях), но это поведение имеет смысл для любых приложений, работающих в веб -браузере – как на мобильных, так и на рабочем столе. Обычно, когда диалог открыт, кнопка «Назад» должна действовать так же, как если бы пользователь выбрал опцию «Отмена». Худшее, что может произойти (но, к сожалению, это удивительно распространено), это то, что диалог закроется, и браузер уйдет от страницы, которая открыла диалог!
В приложении React мы можем использовать историю браузера (выявленную нашей выбранной библиотекой маршрутизации), чтобы убедиться, что нажатие кнопки на спине при открытии диалога закрывает диалог и сохраняет приложение на том же экране, который открыл диалог. В качестве бонуса, если пользователь снова перейдет вперед, мы можем очень легко восстановить диалог в его предыдущем состоянии. Давайте взглянем.
Для удобства я создал Пример на CodeSandbox Чтобы продемонстрировать конечный результат. В этом примере я добавил Достичь маршрутизатора и Материал UI в качестве зависимостей для обеспечения маршрутизации/навигации и некоторых элементов управления пользовательским интерфейсом. Концепция, которую я демонстрирую здесь, должна работать так же хорошо с React Router и другие библиотеки управления пользовательским интерфейсом без слишком много изменений.
В нашем примере приложения у нас есть список пользователей. Когда вы нажимаете/нажимаете по имени пользователя, диалог появится с некоторыми действиями, которые можно выполнить. Или вы можете нажать отмену, чтобы закрыть диалог. Наша цель состоит в том, чтобы убедиться, что кнопка Brower’s Back закроет диалоговое окно, не выходя из списка всех пользователей – так же, как если бы опция отмена была выбрана с помощью клика/нажатия.
Мы можем передать пользователь в диалоговом окне, используя объект состояния истории браузера. Мы нажмите новое состояние на стек (без изменения URL), и диалог проверит текущее состояние, чтобы узнать, когда оно должно открыться или закрыть.
Давайте начнем с сохранения списка пользователей, использующих некоторые компоненты из пользовательского интерфейса материала:
// inside render(){users.map(user => { return (
this.selectUser(user)} > ); })}
У нас есть множество пользователей, которые мы сопоставляем по ListItem компоненты. Когда элемент списка нажимается/нажат, мы называем функцию с именем selectUser () Это будет манипулировать историей браузера.
Для справки, пользователь в массиве выглядит следующим образом:
{ id: 1, name: "Franklin Nelson" }
В selectUser () , мы используем vavigate () Функция предоставлена нашему компоненту с помощью маршрутизатора Reach, чтобы добавить пользователя в стек истории.
selectUser(user) {
let newState = { selectedUser: user };
this.props.navigate(this.props.location.pathname, { state: newState });
};
Заметьте, что мы используем this.props.location.pathname (также предоставлена Resee Router), чтобы гарантировать, что URL не изменяется. Мы остаемся в том же месте, но добавлена новая запись истории, которая имеет другое состояние. Это означает, что когда мы вернемся, мы останемся на одной странице.
Далее, давайте посмотрим, как наш UserActionsDialog компонент отображается.
В качестве первого шага мы должны проверить, есть ли у текущего состояния истории выбранный пользователь. Если пользователь не будет выбран, мы просто вернем NULL Потому что мы не хотим отображать диалог:
// inside UserActionsDialog's render()
let user = undefined;
let state = this.props.location.state;
if (state && "selectedUser" in state) {
user = state.selectedUser;
}
if(!user)
{
return null;
}
Если пользователь выбран, мы должны отобразить наш диалог. Это может выглядеть примерно так:
// continued from above return ( );
Обратите внимание, что у нас есть доступ к полному пользовательскому объекту, выбранному в родительском компоненте. Мы получаем доступ к его имя поле здесь.
Для простоты первые два действия просто вызывают alert () Анкет Третий вариант называется «Отмена», и он должен закрыть диалог. Нажав на этот элемент вызовы cancelitem_onclick () , что появляется ниже:
cancelItem_onClick = () => {
window.history.back();
};
Когда мы называем window.history.back () Выбранный пользователь удаляется из стека истории и нашего UserActionsDialog Компонент повторно заполнит и возвращает NULL Анкет Это приведет к скрытую диалога.
Обратите внимание, что мы ничего не делаем, чтобы отменить, кроме как перейти назад. Имея это в виду, нам не нужно делать что -то еще, чтобы включить кнопку Back. Это просто работает! Фактически, после того, как мы перейдем обратно, кнопка «Прямое» браузера тоже будет работать, и диалог будет открыт… включая того же выбранного пользователя.
Вернувшись в родительский компонент, который содержит наш Список пользователей, давайте посмотрим, как добавить наш Useractiondialog :
// this goes after the list of all users
Заметьте, что мы размещаем Useractiondialog Внутри Маршрутизатор составная часть. Это гарантирует, что Место Предоставление передается в диалоговое окно, чтобы мы могли найти выбранного пользователя. Вы можете гнездовать маршрутизаторы, так что это нормально, если есть еще один маршрутизатор дальше вверх по дереву компонента.
Как я упоминал ранее, маршрут Путь это то же самое, что и его родитель. Нам не нужно менять URL -адрес при выборе пользователя, потому что это не имеет большого смысла, если пользователь захочет поделиться страницей, которая содержит диалог. Поскольку текущий объект состояния хранит пользователя, это то, что мы используем, чтобы определить, должен ли диалог быть открытым или закрытым.
Даже при использовании какого -то роутера многие веб -приложения не учитывают все случаи, когда кнопка «Назад» должна вести себя определенным образом. Открытие диалогов для выбора действия – это обычное место, где пользователь может нажимать кнопку Back, чтобы отменить, и вы не хотите, чтобы ваше приложение неожиданно перемещалось на другую страницу. На Android это особенно важно, потому что кнопка Global Back является такой основной частью пользовательского опыта. Тем не менее, это так же полезно в веб -браузере на любой платформе, в том числе на рабочем столе.
Оригинал: “https://dev.to/joshtynjala/enabling-the-back-button-to-cancel-confirmation-dialogs-in-react-apps-1ng9”