reactjs 如何在react for sort time中创建购物车通知?

f3temu5u  于 2023-02-08  发布在  React
关注(0)|答案(2)|浏览(111)

如何创建购物车通知当我点击

  • 添加到购物车

按钮(就像在亚马逊当你点击addtocart)在React排序时间?
我正在使用

const change = useSelecter(state =\> state.cart.change)
useState(()=\> {
if(change){
}
`
},\[change\])

它的触发器,当我点击添加到购物车,但trriger后,我希望通知在1秒内消失
enter image description here

ukqbszuj

ukqbszuj1#

useEffect(() => {
    const timeId = setTimeout(() => {
      // you can show notification using react-toastify or react-notifications, or custom
    }, 1000)
}, [change]);
gojuced7

gojuced72#

我会使用https://www.npmjs.com/package/react-toastify或使用setTimeout()创建一个回调函数。

// On componentDidMount set the timer
  useEffect(() => {
    const timeId = setTimeout(() => {
      // After 3 seconds set the show value to false
      setShow(false)
    }, 3000)

PS:该代码取自How to disappear alert after 5 seconds in React JS?,以保存手动写出它的时间。
注意:你需要在你的状态中存储一个值,这样它就知道是否显示购物车通知,所以你可以创建一个名为showCart的值,并将其设置为true/false,而不是setShow()

相关问题