为什么这个组件根本不显示？反应日期选择器

Question

这里是组件：

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';

class DatePickerCreater extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <DatePicker
                disabled={this.props.answer.isDisabled}
                dateFormat="YYYY/MM/DD"
                selected={Date(this.props.answer.value)}
                onChange={(e) => this.props.blurHandler(e.target.value,this.props.answer)} 
            />
        );
    }
}

export default DatePickerCreater

当我尝试渲染它时，它什么也没显示...

非常感谢您的每一个回答！

Answer 1

selected 属性采用 moment.js 日期，而不是普通的 javascript 日期。您应该会收到一条错误消息，提示“date.clone 不是函数 "。您可以通过使用时刻日期来解决此问题：

import moment from 'moment';

class DatePickerCreater extends Component {
    render() {
        return (
            <DatePicker
                disabled={this.props.answer.isDisabled}
                dateFormat="YYYY/MM/DD"
                selected={moment(this.props.answer.value)}
                onChange={(e) => this.props.blurHandler(e.target.value, this.props.answer)}
            />
        )
    }
}

您也可能忘记导入react-datepicker css 文件。否则，弹出窗口将无法正确显示：

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

编辑

自从他们改用 date-fns 这个答案已经过时了。 如果您将 react-date-picker 与 >=2.0 版本一起使用，则不能再传递 moment.js 实例。而是使用本机 Date 对象并使用 date-fns 操作它们。

供参考：

在 1.8.0 版之前，此软件包使用 Moment.js。开始 v2.0.0，我们切换到使用 date-fns，它使用原生 Date 对象， 以减小包的大小。如果您从 1.8.0 切换到 2.0.0 或更高版本，请参阅上面的更新示例，查看examples site 以获取最新示例。

---

Answer 2

代码不够用，怎么告诉super()需要用props调用：

constructor(props){
   super(props);
   // ... code
}