Блог

https://codesandbox.io/s/l2qkywz7xl?from-embed=amp;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>
 

Итак, после того, как я нажму кнопку удаления, которая вызывает параметр удаления, появится моя строка записи тоста удалена, но как я могу добавить к ней кнопку отмены?

Вы забыли указать <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} />