如何使用 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")
);

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

How to get the time in seconds after click on submit button using React Count Down Timer

countdowntimer

reactjs