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

【问题标题】：React Hooks Change Text of Button on Click and then back againReact Hooks 在单击时更改按钮的文本，然后再返回
【发布时间】：2021-06-17 17:55:09
【问题描述】：

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

我有这个

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

到目前为止。

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

【问题讨论】：

标签： html reactjs button react-hooks settimeout

【解决方案1】：

在useEffect里面添加timeout，并将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>)

Working example

【讨论】：

谢谢！是的，这很好用。我的另一个问题是是否在同一组件的其他地方使用 useState。这会覆盖之前的 useState 调用吗？
你的意思是在组件的其他部分调用 setButtonText(text) 吗？
我是 React Hook 业务的新手。哈哈。但是我不知道如何使用我当前的点击处理程序来更改按钮的单词所以我想我会使用 2（以前从未尝试过）第一个 1 将东西添加到购物车并使用 useState 第二个是这个。但是添加这个会破坏第一个。
是的，第二个 onClick 会覆盖第一个，但是你可以创建一个函数来调用两者（handleAddToCart 和 setButtonText），即： const handleClick = () => {handleAddToCart(); setButtonText("Added") }，然后在按钮内部：onClick={handleClick}

【解决方案2】：

这是我提出的解决方案https://codesandbox.io/s/objective-kilby-nicm4?file=/src/App.js

在我从函数中获得更新按钮标题后，我刚刚使用 setTimeout 将其更改为 1 秒。

【讨论】：

【解决方案3】：

只需将onClick 处理程序更改为此

onClick={
setButtonText("Added");
setTimeout(() => setButtonText("Add to Cart"), 1000)
}

【讨论】：

【解决方案4】：

让我们使用 useEffect：

useEffect(() => {
  const timeout = window.setTimeout(() => {
    setButtonText("Add To Cart")
  }, 1000)

  return () => window.clearTimeout(timeoutID )
}, [buttonText])

【讨论】：

每次状态改变后都会触发回调。这样我们将在操作后负责清除超时。
@nullptr 状态保持不变，不会检测到变化，不会再次执行该块。

【解决方案5】：

这种方式应该可以工作：

<button
   type="submit"
   onClick={() => {
   setButtonText("Added");
   setTimeout(() => {
     setButtonText("Add To Cart");
      }, 1000);
     }}
   >
    {buttonText}
 </button>

这里是一个例子：https://codesandbox.io/s/react-hooks-change-text-of-button-on-click-and-then-back-again-qhbzv?file=/src/App.js

【讨论】：