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

Question

我是 meteor 和 react 的新手，如果这是一个愚蠢的问题，我深表歉意。

我试图在我的流星项目中放置一个反应日期时间选择器，但没有成功。

以下为项目结构（与meteor官方指南中的todo app相同）

imports

   -ui


      -App.jsx

      -Example.jsx

Example.jsx 中的代码（我从 http://dev.quri.com/react-bootstrap-datetimepicker/]1

中的受控组件示例复制而来

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

import 'react-datepicker/dist/react-datepicker.css';

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
    />;
  }
}

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>
    )
    };

}

我的应用程序可以运行并在我尝试添加日期时间选择器并放置

行之前打印 "Time selecting" 行

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

在App.jsx

如何正确使用日期时间选择器？

现在我删除了 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>
        )
      }
    }

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

Answer 1

您可能只复制了 <DatePicker> 部分，您还应该包括 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>
  }
}

这里是 codepen for react-datepicker demo.

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

react datetimepicker with meteor

datetimepicker

meteor

reactjs