Reactjs 用流星反应日期时间选择器

我是一个新手流星和反应，对不起，如果这是一个愚蠢的问题

我试图在我的流星计划中加入一个时间选择器，但没有成功

下面的项目结构与meteor官方指南中的todo应用程序相同

imports

   -ui


      -App.jsx

      -Example.jsx

Example.jsx中的代码，我从1中的受控组件示例复制了该代码

App.jsx中的代码

import React, { Component } from 'react';
import Example from './Example.jsx';
import DatePicker from 'react-datepicker';
import moment from 'moment';



export default class App extends Component {
    render() {
        return (
            <div className="container">
            <h1> Time selecting </h1>
            <DatePicker selected={this.state.date} onChange={this.handleChange} />
            </div>
    )
    };

}

在我尝试添加datetimepicker并放置行之前，我的应用程序可以运行并打印行时间选择

<DatePicker selected={this.state.date} onChange={this.handleChange} />

在App.jsx中

如何正确使用datetimepicker

现在我删除了Example.jsx文件，并将App.jsx中的文件更改为

import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          date: "1990-06-05",
          format: "YYYY-MM-DD",
          inputFormat: "DD/MM/YYYY",
          mode: "date"
        };

         this.handleChange = this.handleChange.bind(this);
      }

      handleChange(date) {
        this.setState({
            startDate: date
        });
     }

      render() {

    return (
                <div className="container">
                   <h1> Time selecting </h1>
                   <DatePicker selected={this.state.startDate} 
                                         onChange = {this.handleChange} />
                </div>
        )
      }
    }

---

但是浏览器仍然没有显示任何内容。

您可能只复制了还应包括handleChange回调函数和初始状态的部分，如下所示

    import React from 'react';
    import DatePicker from 'react-datepicker';
    import moment from 'moment';

   class Application extends React.Component {

  constructor(props) {
        super(props);
        this.state = {date: moment()};
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(date) {
        this.setState({
            startDate: date
        });
     }


  render() {
    return <div className="container">
                   <h1> Time selecting </h1>
                   <DatePicker selected={this.state.date}
                    onChange={this.dateChanged} />
                </div>
  }
}

---

以下是示例中未定义this.state.date和this.handleChange的

？控制台中有错误吗？@larrydahooster我只是复制了代码。它可能没有定义。UH如果我想在我的浏览器新手上显示datetimepicker，我该如何定义它，sorry@abdul控制台中没有错误。在我粘贴代码后，浏览器变成了白色屏幕，没有显示任何内容。在我粘贴该行之前，浏览器正在打印时间选择浏览器仍然保持白色屏幕。如果我做错了什么，我会把我的更改放在第一个问题中。你需要安装导入的软件包。使用npm install react datepicker-save安装react date picker了解更多详细信息，请查看以下链接，暂时查看js。我安装了，并再次尝试安装。但它仍然不起作用。

    import React from 'react';
    import DatePicker from 'react-datepicker';
    import moment from 'moment';

   class Application extends React.Component {

  constructor(props) {
        super(props);
        this.state = {date: moment()};
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(date) {
        this.setState({
            startDate: date
        });
     }


  render() {
    return <div className="container">
                   <h1> Time selecting </h1>
                   <DatePicker selected={this.state.date}
                    onChange={this.dateChanged} />
                </div>
  }
}