我正在尝试使用Chakra-UI React.js组件库以编程方式显示Chakra-UI Toast,并且正在努力使其工作。 Chakra-UI Toast documentation仅显示如何通过单击按钮显示吐司,但是我想以编程方式显示它-在进行AJAX调用后返回的诺言中。我不确定是否可行,但是我想调用一个showToast函数来显示它。
我正在将Chakra-UI集成到React.js Web应用程序中,并且对React.js和Chakra-UI来说都是新手。
更新资料
这是一个CodeSandbox,显示了我要实现的目标:https://codesandbox.io/embed/upbeat-rhodes-9zkii。我在其中有一个按钮,当单击它时会显示吐司,但是我想在TODO所在的setTimeout中显示它。
最佳答案
您可以使用React的useEffect挂钩以编程方式触发吐司。 useEffect挂钩对于任何副作用(例如,获取数据或DOM操作)都非常有效。
const toast = useToast();
useEffect(() => {
// Show toast every 5 seconds.
setInterval(() => {
toast({
title: "Current Time.",
description: `Time ${new Date()}`,
status: "success",
duration: 5000,
isClosable: true
});
}, 5000);
}, []); // Passing in empty array so this will only get called on mount
有关完整的解决方案,请查看代码沙箱https://codesandbox.io/s/eloquent-knuth-bt5u8?fontsize=14