时间戳

首页 > 解决方案 > 如何从“react-countdown-now”库中调用启动和暂停函数？

reactjs - 如何从“react-countdown-now”库中调用启动和暂停函数？

问题描述

我是新来的反应，我一直在尝试使用图书馆倒计时创建一个国际象棋倒计时计时器。我目前有一个显示时间的时钟组件。我不知道如何调用启动和停止功能。

这是图书馆的链接：https ://www.npmjs.com/package/react-countdown-now#api-reference

我的时钟组件代码：

function Clock({ time }) {
  return (
    <div style={clockStyle}>
      <Countdown
        date={Date.now() + (time * 60000)}
        intervalDelay={3}
        zeroPadTime={2}
        autoStart={false}
        daysInHours
      />
    </div>
  );
}

在父组件中：

<Clock time={state.time} />

标签： reactjscountdown

解决方案

有一种可能的方法可以做到这一点，我花了很长时间才弄清楚这一点。我和你一样在做一个倒数计时器，但我被 useRef 卡住了。所以这里是：

function FullClock(props) {
  const { total } = props;

  const clockRef = useRef();
  const handleStart = () => clockRef.current.start();
  const handlePause = () => clockRef.current.pause();

  return (
    <div>

      <Countdown
        date={Date.now() + total}
        renderer={renderer}
        ref={clockRef}
      />

      <Button
        variant='contained'
        color='primary'
        type='submit'
        onClick={handleStart}
      >
        RESUME
      </Button>
      <Button
        variant="contained"
        color='primary'
        type='submit'
        onClick={handlePause}
      >
        PAUSE
      </Button>
    </div >
  );
}

如果您需要我详细说明，请随时问我，我爸爸敦促我上楼梯睡觉，我不能再呆下去了。

推荐阅读