时间戳

首页 > 解决方案 > React Hooks 在单击时更改按钮的文本，然后再返回

html - React Hooks 在单击时更改按钮的文本，然后再返回

问题描述

使用 React Hooks 我想在用户单击按钮说“已添加”时更改按钮的文本，然后我想在 1 秒后将其设置回原始文本“添加到购物车”。我假设我会为此使用 setTimeout ，但在这种情况下无法弄清楚如何使用它。

我有这个

  const [buttonText, setButtonText] = useState("Add To Cart");

到目前为止。

  <button
    type="submit"
    onClick={() => setButtonText("Added")}
  >
    {buttonText}
  </button>

标签： htmlreactjsbuttonreact-hookssettimeout

解决方案

添加timeoutinside useEffect，并将 buttonText 作为依赖传递，每次更新 buttonText 时，超时都会恢复默认文本值：

const text = "Add To Cart" 
const [buttonText, setButtonText] = useState(text);

 useEffect(()=> {
    const timer = setTimeout(()=> {
       setButtonText(text);
    }, 1000);
    return ()=> clearTimeout(timer);
 }, [buttonText])
 
 return (<button
    type="submit"
    onClick={() => setButtonText("Added")}
  >
    {buttonText}
  </button>)

工作示例

推荐阅读