Question

如何正确获取日期和时间？

2016-11-13

42598

date reactjs

我是 React 的新手，想获取实际日期和时间，但我不知道该怎么做 :(

有人可以帮帮我吗！

我尝试获取初始状态的日期并每秒实现一次。当我运行它时，出现白屏。

import React from 'react';
import './Menubar.css';
import Time from 'react-time';

const Menubar = React.createClass({
getInitialState() {
    return {
        now: new Date().now(),
    };
},

getRealTime: function() {
    this.setState(
        {
            now: new Date().now(),
        })
},

/**
 * Render the Menubar component
 * @return {Component} the App Component rendered
 */
render() {
    setInterval(this.getRealTime(), 1000);
    return (
        <div className="Menubar">
            <ul className="Menubar-menu">
                <div className="">
                    <li className="Menubar-name">login name</li>
                    <li className="Menubar-date"><Time value={this.state.now} format="DD/MM/YYYY" /></li>
                    <li className="Menubar-time"><Time value={this.state.now} format="HH:mm:ss" /></li>
                </div>
            </ul>
        </div>
    );
}
});

export default Menubar;

Answer 1

两件事：

new Date().now() 不是函数， new Date() 返回当前日期和时间，因此无需添加它。
您尝试在渲染函数内设置状态（每次渲染时调用 getRealTime ，这会导致重新渲染）。据我了解，您希望每秒更新一次时间。您可以在 componentDidMount 中进行设置。

这是您的 Menubar 组件，其中修复了这些问题。我还清除了组件卸载时的间隔：

const Menubar = React.createClass({
  getInitialState() {
    return {
      now: new Date(),
    };
    this.interval = null;
  },

  componentDidMount: function() {
    const self = this;
    self.interval = setInterval(function() {
      self.setState({
        now: new Date(),
      });
    }, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.interval);
  },

  render() {
    return (
      <div className="Menubar">
        <ul className="Menubar-menu">
          <div className="">
            <li className="Menubar-name">login name</li>
            <li className="Menubar-date"><Time value={this.state.now} format="DD/MM/YYYY" /></li>
            <li className="Menubar-time"><Time value={this.state.now} format="HH:mm:ss" /></li>
          </div>
        </ul>
      </div>
    );
  }
});

Answer 2

要获取当前日期，您可以使用

var dateVariable = new Date()
dateVariable.getDate()

或者，如果您想要完整形式的当前日期和时间，那么

var dateVariable = Date().toLocaleString()

您可以在以下位置找到可用方法的完整列表： https://hdtuto.com/article/react-js-get-current-date-and-time-example

上面的链接节省了我很多时间。希望它能起作用。祝您黑客愉快！

Answer 3

我只想补充 IronmanX46 的回答，但它不让我发表评论。

我想指出的是，您可以做与

var dateVariable = new Date()
dateVariable.getDate()
var dateVariable = Date().toLocaleString()

完全相同的事情，只需执行

var dateVariable = Date()

根据文档：

Date() When called as a function, returns a string representation of the current date and time. All arguments are ignored. The result is the same as executing new Date().toString().

有很多不错的网站可以为您提供如何做事的示例，但我发现阅读文档可以节省时间，文档通常包含示例。如果我看不懂文档，我会去查看其他示例。

日期文档链接