单击按钮时对 toastify 做出明确或错误的反应

Question

我正在为我的表单使用react-toastify。目前我在错误或成功消息时显示消息。当用户再次单击时，我需要清除或隐藏所有类型的 toast 通知。请检查下面的代码。

用于 toast 的库 https://www.npmjs.com/package/react-toastify

      const addRecord= (form) => {
     toast.hide(); // i need to hide all toast notification 
    const header = {
      Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
      User_name: appUserConfig.userName,
    };
    httpPost(SAVE_INVOICE, data, header)
      .then((response) => {

        if (response.status === 200) {
          toast.success('Successfully Saved', { position: toast.POSITION.TOP_RIGHT })
        }

      })
      .catch((e) => {
        console.log("e:", e);
        toast.error('Something went wrong', { position: toast.POSITION.TOP_RIGHT, autoClose: false })

      });

  }

根据我的要求，我需要保留错误消息 toast 而不自动关闭。因此，当用户再次单击添加按钮时，我需要清除所有 toast 通知。我如何做到这一点

Answer 1

您可能需要检查其文档以清除所有 toast。这是我发现的

参考：https: //fkhadra.github.io/react-toastify/remove-toast

要删除所有吐司，请使用：

toast.dismiss();

在你的情况下这样做。

const addRecord= (form) => {
     toast.dismiss(); // i need to hide all toast notification 
    const header = {
      Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
      User_name: appUserConfig.userName,
    };
    httpPost(SAVE_INVOICE, data, header)
      .then((response) => {

        if (response.status === 200) {
          toast.success('Successfully Saved', { position: toast.POSITION.TOP_RIGHT })
        }

      })
      .catch((e) => {
        console.log("e:", e);
        toast.error('Something went wrong', { position: toast.POSITION.TOP_RIGHT, autoClose: false })

      });

  }