如何添加刪除按鈕應更改為撤消（10秒）單擊未刪除項目的功能

Question

stalkbiltz 中的完整代碼

如果您能指出我想在單擊刪除按鈕時添加計時器的方向將非常有幫助計時器應該倒計時 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>

編輯

僅將特定按鈕文本設置為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>