Reactjs 显示从设定日期到现在的剩余时间

我制作了一个类组件来显示和呈现new Date（）函数中的当前时间。我想通过将现在的日期（）减去未来的时间来显示剩余的时间量。假设现在是下午1点，未来时间是下午3点，它将显示2:00:00

这是我当前时间的当前代码

class Clock extends React.Component {
constructor(props) {
    super(props);
    this.state = { date: new Date() };
}
componentDidMount() {
    this.timerID = setInterval(
        () => this.tick(),
        1000
    );
}
componentWillUnmount() {
    clearInterval(this.timerID);
}
tick() {
    this.setState({
        date: new Date()
    });
}

render() {
    return (
        <div>
            <h2>Waktu tersisa {this.state.date.toLocaleTimeString()}.</h2>
        </div>
    );
}

类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={date:new date（）}；
}
componentDidMount（）{
this.timerID=setInterval(
（）=>这个。勾选（），
1000
);
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
这是我的国家({
日期：新日期（）
});
}
render（）{
返回(
Waktu tersisa{this.state.date.toLocaleTimeString（）}。
);
}

---

任何帮助都将不胜感激。

使用

Moment.js

：

const currentDate = moment();
const future = moment('2019-03-02 10:03:02');
const timeLeft = moment(future.diff(currentDate)).format("HH:mm:ss");

---

请参阅以获取进一步解释。

启动您选择的固定日期时间。计算每个勾选的固定时间和当前时间之间的差异（以毫秒为单位）。在显示之前，将毫秒转换为小时、分钟和秒

class Clock extends React.Component {
    constructor(props) {
        super(props);
        let fixDate = (new Date()).setHours(15,0,0); // for 3:00:00 pm
        let currDate = new Date();
        this.state = { fixDate, diff: fixDate-currDate };
    }

    ....

    tick() {
        this.setState((prevState, props) => ({
            diff: prevState.fixDate - (new Date()).getTime(),
        }));
    }

    ....

    render() {
        const { diff } = this.state;
        const hours = Math.floor(diff/(60*60*1000));
        const mins = Math.floor((diff-(hours*60*60*1000))/(60*1000));
        const secs = Math.floor((diff-(hours*60*60*1000)-(mins*60*1000))/1000);

        return (
            <div>
                <h2>Waktu tersisa {hours}:{mins}:{secs}</h2>
            </div>
        );
    }
}

类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
设fixDate=（new Date（））.setHours（15,0,0）；//下午3:00:00
设currDate=新日期（）；
this.state={fixDate，diff:fixDate currDate}；
}
....
勾选（）{
this.setState（（prevState，props）=>({
diff:prevState.fixDate-（新日期（））.getTime（），
}));
}
....
render（）{
const{diff}=this.state；
常数小时=数学楼层（差值/（60*60*1000））；
常数分钟=数学楼层（（差-（小时*60*60*1000））/（60*1000））；
常数秒=数学楼层（（差-（小时*60*60*1000）-（分钟*60*1000））/1000）；
返回(
Waktu tersisa{小时}：{分钟}：{秒}
);
}
}

你能展示一下你想如何使用这个未来的日期吗？它似乎不在你的代码中。使用像Moment.js这样的时间库