如何重置反应计数

Question

我想使用react-countup使用任一钩子的渲染道具在计数器到达终点时重置它。

我尝试了各种配置，但无法解决。

<CountUp className='countup' 
  end={100}
  duration={5}
  reset={true}
/>

上面的代码不起作用。 文档说了以下有关如何使用渲染道具进行重置的信息。

reset: () => void

我不确定如何解释此问题以重置计数器。

Answer 1

要重置react-countup，您需要onEnd个道具。

  

onEnd是过渡阶段的回调函数。

<CountUp className='countup' 
    end={100}
    duration={5}
    onEnd={({ pauseResume, reset, start, update }) => reset()}
/>

要再次使其start，

<CountUp className='countup' 
    end={100}
    duration={5}
    onEnd={({ pauseResume, reset, start, update }) => start()}
/>

Answer 2

如complete example中所示，您可以像下面这样从react-countup挂钩中提取重置功能：

const { countUp, start, pauseResume, reset, update } = useCountUp({...});

现在在您的代码中调用reset函数会将其重置：

<div onClick={reset}>Reset Counter</div>