如何在基于 react-countdown 组件的计时器中重置计时器？

Question

我是 reactjs 和 javascript 的新手。 我正在尝试在我的网页中实现一个计时器。 如何实现当单击“重置时钟”按钮时调用的 reset() function？ 我期待计时器重置为初始值。 请提供实施复位 function 的建议。

这是我正在使用的代码：

应用程序.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Clock from './CountDown';

class App extends React.Component {
    clockRef = null;

    constructor(props) {
        super(props);
        this.setClockRef = this.setClockRef.bind(this);
        this.start = this.start.bind(this);
        this.pause = this.pause.bind(this);
        this.reset = this.reset.bind(this);
    }

    start() {
        this.clockRef.start();
    }
    pause() {
        this.clockRef.pause();
    }
    reset() {
    }

    setClockRef(ref) {
        // When the `Clock` (and subsequently `Countdown` mounts
        // this will give us access to the API
        this.clockRef = ref;
    }

    render() {
        return (
            <>
                <button onClick={this.start}>Start Clock</button>
                <button onClick={this.pause}>Pause Clock</button>
                <button onClick={this.reset}>Reset Clock</button>
                <Clock refCallback={this.setClockRef} time="60" />
            </>
        );
    }
}
export default App;

倒计时.js：

import React from 'react';
import Countdown from 'react-countdown';

export default class Clock extends React.Component {
    render() {
        const { refCallback, time } = this.props;

        return (
            <Countdown
                // When the component mounts, this will
                // call `refCallback` in the parent component,
                // passing a reference to this `Countdown` component
                key = {0}
                ref={refCallback}
                date={Date.now() + (time * 60000)}
                intervalDelay={3}
                zeroPadTime={2}
                autoStart={false}
                daysInHours
            />
        );
    }
}

Answer 1

从实现启动、暂停和重置的react-countdown存储库中查看此示例： https://github.com/ndresx/react-countdown/blob/c909d9746bc79cdc9b8866d98284b0256d643a1a/examples/src/CountdownApi.tsx

在该示例中，他们通过在 state 中保存date并更新它以进行重置来重置倒计时。