如何正确使用反应日期

时间:2018-01-03 08:09:17

标签: reactjs react-redux airbnb react-dates

我遇到了反应日期的问题。我最终得到了这个警告:

Failed prop type: The prop `startDateId` is marked as required in `withStyles(DateRangePicker)`, but its value is `undefined`.

根据文档,它声明您需要使用此命令:

npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.## react-addons-shallow-compare@>=#.##

我假设哈希代表您要使用的版本,因为它们没有指定任何版本,它应该使用最新版本。

我使用的版本如下:

"react-dates": "^16.0.1", "moment": "^2.20.1", "react": "^16.2.0", "react-dom": "^16.2.0", "react-addons-shallow-compare": "^15.6.2"

在我的组件中,我有以下内容:

import 'react-dates/lib/css/_datepicker.css';
import 'react-dates/initialize';
import { DateRangePicker } from "react-dates";

<DateRangePicker
  startDate={this.props.filters.startDate}
  endDate={this.props.filters.endDate}
  onDatesChange={this.onDatesChange}
  focusedInput={this.state.calendarFocused}
  onFocusChange={this.onFocusChanged}
/>

任何人都可以告诉我为什么我会收到此错误以及如何将其删除?

1 个答案:

答案 0 :(得分:3)

查看v16.0.1中的source codestartDateId 不再 required支持DateRangePickerInput

道具位于DateRangePickerShape.js

基本上,修复方法是向组件添加一个id,如下所示:

<DateRangePicker
  startDateId="MyDatePicker"
  startDate={this.props.filters.startDate}
  endDate={this.props.filters.endDate}
  onDatesChange={this.onDatesChange}
  focusedInput={this.state.calendarFocused}
  onFocusChange={this.onFocusChanged}
/>