如何使用React Count Down Timer在点击提交按钮后获得以秒为单位的时间

Question

const renderer = ({ hours, minutes, seconds }) => { 
return <span>{hours}:{minutes}:{seconds}</span>;
}

<span ><CountDown date={Date.now() + 18000}
renderer={renderer}/></span>

<button onClick={onButtonClick} >Submit</button>

我用过这里的反作用倒计时npm包

一旦我们加载页面，计时器就会打开，我需要在点击提交按钮时获得剩余时间

Answer 1

它不漂亮，但它很管用，我没有时间让它更漂亮——给你

import React from "react";
import ReactDOM from "react-dom";
import Countdown from "react-countdown";
// Random component
const Completionist = () => <span>You are good to go!</span>;
const renderer = ({ hours, minutes, seconds }) => {  return <span>{hours}:{minutes}:{seconds}</span>; }
const cd = <Countdown date = {Date.now() + 18000} rend={renderer}/>
const endDate = Date.now() + 18000

function onButtonClick() {
const currentDate = Date.now();

const diff = (currentDate - endDate) / -1000;
console.log(diff)

}



ReactDOM.render(

<><span>{cd}</span><button onClick={onButtonClick} >Submit</button></>,
document.getElementById("root")
);