Блог

У меня есть компонент react, который переносит некоторый контент, недоступный на экранах с разрешением менее 1024 пикселей, если пользователь изменит размер экрана, будет запущено событие, открывающее тост, который можно закрыть, только щелкнув по нему, но если пользователь снова изменит разрешение, я хочу автоматически закрыть этот тост. Есть ли способ принудительно закрыть определенный тост, назначив какой-то идентификатор для его поиска и щелкнув по нему с помощью javascript?

 // this calls a generic function that opens a toast.
manageWarning('', 'You are running on a small screen resolution, this feature it's only available on screens up to 1024 px, please scale up the window again', true);

// This is the generic function
export function manageWarning(id, message, disableAutoClose) {
    toastr.options.timeOut = disableAutoClose ? 0 : Global.MESSAGE_ERROR_DURATION;
    toastr.options.extendedTimeOut = disableAutoClose ? 0 : toastr.options.extendedTimeOut;
    toastr.warning(message);
}
  

Мне удалось исправить это с помощью некоторых изменений в моей кодовой базе.

Метод управления предупреждением теперь возвращает сам тост

 export function manageWarning(id, message, disableAutoClose) {
    toastr.options.timeOut = disableAutoClose ? 0 : Global.MESSAGE_ERROR_DURATION;
    toastr.options.extendedTimeOut = disableAutoClose ? 0 : 
    toastr.options.extendedTimeOut;
    return toastr.warning(message);
}
  

Теперь пользователь может сохранить ссылку на этот тост

 this.toast = manageWarning('', 'You are running on a small screen resolution, this feature it's only available on screens up to 1024 px, please scale up the window again', true);
  

Имея это в виду, теперь я могу просто вызвать

 this.toast.fadeIn(); // Method to show the toast again.
this.toast.fadeOut(); // Method close the toast.
  

Насколько я знаю, нет способа пометить конкретные тосты идентификатором, используя поведение плагина по умолчанию.

Если вы собираетесь отобразить только один тост и хотите очистить его (или все отображаемые тосты), тогда просто используйте

 toastr.clear();
  

Если у вас есть сценарий, в котором вы можете отобразить более одного тоста, и вы хотите удалить определенный тост, тогда вы можете получить контейнер toast с помощью

 $('#toast-container');
  

Или получить массив всех тостов с

 $('#toast-container').children();
  

Как только у вас это получится, вы можете найти свой конкретный тост и использовать .remove();

 $('#toast-container').children()[1].remove();
  

Надеюсь, это поможет