使用 React 钩子 useState 将两个单击处理程序添加到 1 个函数

如何解决使用 React 钩子 useState 将两个单击处理程序添加到 1 个函数

我有一个“添加到购物车”按钮，我希望它在点击时做两件事。我希望它向购物车添加一个项目，我还希望它在 1 秒内将文本更改为“已添加”。

问题是如果我调用 onClick 两次，第二个函数会覆盖第一个。

如果我将两个单击处理程序放入 1 个函数中，然后在 1 个 onClick 中调用该函数，则只有将内容添加到购物车的函数才有效。

我哪里出错了？

const [variant,setvariant] = useState({ ...initialVariant })
const [quantity,setQuantity] = useState(1)

const {
    addVariantToCart,store: { client,adding },} = useContext(StoreContext)

const handleAddToCart = () => {
    addVariantToCart(productvariant.shopifyId,quantity)
  }

const text = "Add To Cart";
  const [buttonText,setButtonText] = useState(text);
  useEffect(() => {
    const timer = setTimeout(() => {
      setButtonText(text);
    },1000);
    return () => clearTimeout(timer);
  },[buttonText])

const handleClick = () => {
    setButtonText("Added");
    handleAddToCart();
  }

return (
    <>
      <button
        className="add"
        type="submit"
        disabled={!available || adding}
        onClick={handleClick}
      >
        Add to Cart
      </button>
      {!available && <p>This Product is out of Stock!</p>}
    </>

解决方法

您需要在 buttonText 中使用 button，如下所示，但是，在您的代码中，您使用了硬文本 Add to Cart。

<button
        className="add"
        type="submit"
        disabled={!available || adding}
        onClick={handleClick}
      >
        {buttonText}
      </button>