如何添加删除按钮应更改为撤消（为10秒）的功能，点击未删除该项目

Question

如果您可以指向我的方向，这将非常有帮助 我想在单击“删除按钮计时器”时添加一位蒂默尔，应在单击该项目未删除的单击时将删除按钮计数10秒删除按钮在单击时都应更改为删除（为10秒）

      *<ul>
        {items.map((item) => {
          return (
            <li
              key={item.id}
              style={{ textDecoration: item.done ? "line-through" : null }}
            >
              <Checkbox
                onClick={() => onChangeBox(item)}
                defaultChecked={item.done}
              />
              {item.value}{" "}
              <button
                className="del-button"
                onClick={() => deleteItem(item.id)}
              >
                ❌
              </button>{" "}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default App;*

Answer 1

您可以使用 usestate 钩子，然后检查其值。

创建它：

const [isUndoButton, setIsUndoButton] = useState(false); // you can name it however you want

然后在 deleteitem 函数中更改其值：

function deleteItem(id) {
    // your code
    setIsUndoButton(true);
    setTimeout(() => setIsUndoButton(false), 10000); // 10000 ms = 10 seconds
}

和按钮：

<button className="del-button" onClick={() => deleteItem(item.id)}>
{ isUndoButton ? 'Undo' : '❌' }
</button>

edit

仅将特定按钮文本设置为 undo ：

const [isUndoButton, setIsUndoButton] = useState({});

function deleteItem(id) {
    // your code
    setIsUndoButton((prev) => ({ ...prev, [id]: true }));
    setTimeout(() => setIsUndoButton((prev) => ({ ...prev, [id]: false })), 10000);

}

<button className="del-button" onClick={() => deleteItem(item.id)}>
{ isUndoButton[item.id] ? 'Undo' : '❌' }
</button>

Answer 2

import React, { useState, useEffect } from 'react';

const Cart = () => {
  const [cartItems, setCartItems] = useState([]);
  const [deletedItem, setDeletedItem] = useState(null);
  const [undoTimer, setUndoTimer] = useState(null);

  const deleteItem = (item) => {
    // Remove item from cart
    const updatedCart = cartItems.filter((cartItem) => cartItem.id !== item.id);
    setCartItems(updatedCart);

    // Set deleted item and start undo timer
    setDeletedItem(item);
    const timer = setTimeout(() => {
      // If timer expires, remove the deleted item
      setDeletedItem(null);
    }, 10000);
    setUndoTimer(timer);
  };

  const undoDelete = () => {
    // Restore deleted item to cart
    setCartItems([...cartItems, deletedItem]);
    setDeletedItem(null);

    // Clear the undo timer
    clearTimeout(undoTimer);
  };

  useEffect(() => {
    return () => {
      // Clear the undo timer when component unmounts
      clearTimeout(undoTimer);
    };
  }, [undoTimer]);

  return (
    <div>
      <h2>Cart</h2>
      <ul>
        {cartItems.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => deleteItem(item)}>Delete</button>
          </li>
        ))}
      </ul>
      {deletedItem && (
        <div>
          <p>{deletedItem.name} deleted from cart</p>
          <button onClick={undoDelete}>Undo</button>
        </div>
      )}
    </div>
  );
};

export default Cart;