3

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

嗨，参考上面的沙箱，我也想对我的表做点什么，如何在我的代码中添加撤消功能？

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通知行被删除了，但是我怎样才能给它添加一个撤消按钮呢？

4

1 回答 1

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} />
于 2021-06-13T23:56:28.740 回答