我正在尝试使用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

09-17 13:12
查看更多