有没有办法用外部事件结束吐司？

Question

我有一个 React 组件，它包装了一些在 1024 像素以下的屏幕中不可用的内容，如果用户调整屏幕大小，将触发事件打开一个只能关闭的 toast，单击它，但如果用户调整大小再次解决我想自动关闭此吐司。有一种方法可以强制特定 toast 关闭分配某种 id 以找到它并使用 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);
}

Answer 1

据我所知，无法使用插件的默认行为使用 ID 标记特定 toasts。

如果您只打算显示一个吐司并且想清除它（或所有显示的吐司）那么只需使用

toastr.clear();

如果你有一个场景，你可能会显示多个吐司并且你想要删除特定的吐司，那么你可以使用

获取吐司容器

$('#toast-container');

或者用

获取所有祝酒词的数组

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

一旦你有了它，你就可以找到你的特定 toast 并使用 .remove();

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

希望对您有所帮助

Answer 2

我通过对代码库进行一些更改设法修复了它。

现在管理警告方法returns toast 本身

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);
}

现在消费者可以保存这个toast的引用

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.

有没有办法用外部事件结束吐司？

It's there a way to close a toast with an external event?

javascript

toastr