将两个点击处理程序添加到一个函数中，都使用React钩子useState

Question

我有一个按钮"添加到购物车"；我希望它在点击时能做两件事。我希望它将项目添加到购物车中，并且我还希望它将文本更改为"；添加"；持续1秒。

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

如果我把两个点击处理程序放在一个函数中，然后在一个单独的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>