使用 React hooks useState 将两个点击处理程序添加到 1 个函数

Question

我有一个“添加到购物车”按钮，我希望它在单击时执行两件事。我希望它向购物车添加商品，我还希望它在 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>}
    </>

Answer 1

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

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

使用 React hooks useState 将两个点击处理程序添加到 1 个函数

Adding Two Click Handlers to 1 Function both using React hooks useState

timeout

onclick

reactjs

react-hooks

use-state