Question

我是新手做出反应并试图获得实际的日期和时间，但我无法弄清楚如何这样做:(

请有人帮助我！

我尝试将日期置于初始状态并每秒实现一次。当我运行它时，我得到一个白色的屏幕。

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。

这是你的菜单栏组件，修复了这些问题。我还清除组件卸载的时间间隔：

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

上面的链接节省了我很多时间。希望它有效。快乐黑客！

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

2 个答案: