reactjs 如何在react-toastify中从toast本身中删除特定的吐司

nbnkbykc 于 2023-03-22 发布在 React

关注(0)|答案(1)|浏览(132)

我想创建一个有两个按钮“接受”和“拒绝”的吐司。当我点击拒绝我想解散唯一的烤面包包含这两个按钮。
我只是希望当我点击吐司里面的拒绝按钮时，吐司消失。
下面是我用callingToast组件定制的toat-

const toastId = toast(CallingToast, {
      ...toastOptions,
      autoClose: 60000,
      closeButton: false,
      pauseOnHover: false,
      closeOnClick: false,
    });

下面是我的调用吐司组件-

import React from 'react';
import { toast } from 'react-toastify';

export default function CallingToast() {
  return (
    <>
      <button>accept</button>
      <button
        onClick={}
      >
        reject
      </button>
    </>
  );
}

我试着在reject butto上调用toast.dismiss()，但是它拒绝了所有我不想要的吐司。
我也试着把toastId传递给组件，但显然没有用。我也找不到任何相关的问题，这就是为什么我自己发布的原因。

reactjs

来源：https://stackoverflow.com/questions/75808870/how-can-i-dismiss-a-particular-toast-from-within-the-toast-itself-in-react-toast

1条答案

按热度按时间

7fhtutme1#

如果不带参数调用toast.dismiss，则所有显示的toast都将被删除。每次显示toast时都会返回一个id，因此可以使用该id通过调用toast.dismiss(id)以编程方式删除toast。
下面是从documentation中提取的示例-

import React from 'react';
import { toast } from 'react-toastify';

function Example(){
  const toastId = React.useRef(null);

  const notify = () => toastId.current = toast("Lorem ipsum dolor");

  const dismiss = () =>  toast.dismiss(toastId.current);

  const dismissAll = () =>  toast.dismiss();

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <button onClick={dismiss}>Dismiss</button>
      <button onClick={dismissAll}>Dismiss All</button>
    </div>
  );
}

赞(0）回复(0）举报 2023-03-22

我来回答

reactjs 如何在react-toastify中从toast本身中删除特定的吐司

1条答案

相关问题

热门标签

最新问答