3

这是组件：

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

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

非常感谢每一个回答！

4

2 回答 2

13

该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-datepickercss 文件。否则，弹出窗口将无法正确显示：

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 或更高版本，请查看上面的更新示例，查看示例站点以获取最新示例。

于 2018-08-06T15:21:06.237 回答
0

代码还不够，我能告诉 super() 需要用 props 调用：

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

于 2018-08-06T15:15:02.413 回答