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

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

代码不够，super() 需要用 props 调用什么：

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

Answer 2

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.

操作它们

供参考：

Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.

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

Why doesn't this component show at all? React DatePicker

javascript

reactjs

datepicker

react-datepicker

编辑