reactjs - 如何使用 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>

我在这里使用了 react-countdown 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")
);