我正在尝试显示 Chakra-UI使用 Chakra-UI React.js 组件库以编程方式进行 Toast,并且正在努力使其工作。 Chakra-UI Toast documentation仅显示如何根据按钮单击显示 toast,但我想以编程方式显示它 - 在进行 AJAX 调用后返回的 promise 中。我不确定这是否可行,但我想要一个可以调用的 showToast 函数来显示它。
我正在将 Chakra-UI 集成到 React.js Web 应用程序中,并且对 React.js 和 Chakra-UI 都相当陌生。
更新
这是一个 CodeSandbox,显示了我想要实现的目标:https://codesandbox.io/embed/upbeat-rhodes-9zkii 。我在那里有一个按钮,单击时会显示 toast,但我想在 TODO 所在的 setTimeout 中显示它。
最佳答案
您可以使用 React 的 useEffect Hook 以编程方式触发 toast。 useEffect 钩子(Hook)适用于任何副作用,例如获取数据或 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
关于javascript - 如何以编程方式显示 Chakra-UI Toast?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58314040/