使用 useState reactjs 更改日期

瑙尔

app.js 文件

import React, { useState } from 'react';
import Header from '../header/header';
import Day from '../day/day'
import {BrowserRouter as Router} from 'react-router-dom';
import './app.css';

export default function App() {
        const [currentDay, setDay] = useState(new Date());
        console.log(currentDay)
        function nextDay() {
            console.log("next clicked");
            let nextDate = new Date(currentDay.getTime());
            nextDate = nextDate.setDate(nextDate.getDate() + 1);
            setDay(nextDate);

        }
        return (
            <>
            <Router>
                <Header/>
            </Router>
            <Day 
            date={currentDay}
            nextDay={nextDay}/>
            </>
        )
}

day.js 文件包含 Day - 组件

import React from 'react';
import Moment from 'react-moment';
import './day.css';

export default function Day({date, nextDay}) {
    return (
        <div className="day-container">
            <Moment>{date}</Moment>
            <span onClick={() => nextDay()}>next</span>
        </div>
    )
}

控制台屏幕

单击下一步后,日期对象变为时间戳,第二次单击后抛出错误(currentDay.getTime 不是函数)我不明白其原因。

图沙尔沙希

Date.prototype.setDate更新日期并返回日期的纪元值。

您不需要返回值,只需执行以下操作:

let nextDate = new Date(currentDay.getTime());
nextDate.setDate(nextDate.getDate() + 1);
setDay(nextDate);

您的原始变量仍然可以使用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章