如何在吐司通知上添加撤消按钮

Question

https://codesandbox.io/s/l2qkywz7xl?from-embed=&file=/index.js

嗨，参考上面的沙盒，我也想对我的表做点什么，我如何在代码中添加undo函数？

import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
toast.configure()
const deleteCustomer = (ID) => {
if (window.confirm("Are you sure you want to delete?")) {
Axios.delete(`http://localhost:3001/stats/delete/${ID}`).then(
(response) => {
toast("row deleted");
setCustomerList(
customerList.filter((val) => {
toast("notify");
console.log("toast notify run");
return val.ID !== ID;
})
);
}
);
}
};
const displayCustomers = customerList
.slice(pagesVisited, pagesVisited + customersPerPage)
.map((val, key) => {
const dateStr = new Date(val.latest_time_of_visit).toLocaleDateString(
"en-CA"
);
const timeStr = new Date(val.latest_time_of_visit).toLocaleTimeString();
const dateTime = `${dateStr} ${timeStr}`;
const my_serial = key + pageNumber * customersPerPage;
return (
<tr>
{/*}
<td>{val.ID}</td>

<td>{my_serial + 1}</td>
*/}
<td>{val.name}</td>
<td>{val.email}</td>
<td>{val.company_name}</td>
<td>{val.counts_of_visit}</td>
<td>{dateTime}</td>
<td>{val.contacted}</td>
<td>
<select
onChange={(event) => {
setNewContacted(event.target.value);
}}
>
<option value="" selected disabled hidden>
Select Yes/No
</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<button
className="btn btn-primary"
onClick={() => {
updateCustomerContacted(val.ID);
}}
>
Update
</button>
</td>
<td>
<button
className="btn btn-danger"
onClick={() => {
deleteCustomer(val.ID);
}}
>
Delete
</button>

所以，在我按下调用deleteCustomer的删除按钮后，我的toast notification行被删除了，但我怎么能添加一个撤消按钮呢？

Answer 1

您忘记按照文档中的说明为要安装的组件放置<ToastContainer />。

然后，您需要在toast()函数中放入一个组件作为撤消按钮，以将您的逻辑放入中

你的代码，因为它不完整，应该像这个一样

import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
toast.configure()
const deleteCustomer = (ID) => {
if (window.confirm("Are you sure you want to delete?")) {
Axios.delete(`http://localhost:3001/stats/delete/${ID}`).then(
(response) => {
toast("row deleted");
setCustomerList(
customerList.filter((val) => {
toast(<button onClick={() => console.log("your undo logic here"}>UNDO</button>);
return val.ID !== ID;
})
);
}
);
}
};
const displayCustomers = customerList
.slice(pagesVisited, pagesVisited + customersPerPage)
.map((val, key) => {
const dateStr = new Date(val.latest_time_of_visit).toLocaleDateString(
"en-CA"
);
const timeStr = new Date(val.latest_time_of_visit).toLocaleTimeString();
const dateTime = `${dateStr} ${timeStr}`;
const my_serial = key + pageNumber * customersPerPage;
return (
<tr>
{/*}
<td>{val.ID}</td>

<td>{my_serial + 1}</td>
*/}
<td>{val.name}</td>
<td>{val.email}</td>
<td>{val.company_name}</td>
<td>{val.counts_of_visit}</td>
<td>{dateTime}</td>
<td>{val.contacted}</td>
<td>
<select
onChange={(event) => {
setNewContacted(event.target.value);
}}
>
<option value="" selected disabled hidden>
Select Yes/No
</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<button
className="btn btn-primary"
onClick={() => {
updateCustomerContacted(val.ID);
}}
>
Update
</button>
</td>
<td>
<button
className="btn btn-danger"
onClick={() => {
deleteCustomer(val.ID);
}}
>
Delete
</button>
</td>
<ToastContainer closeOnClick={false} closeButton={false} />