如何正确使用反应日期

Question

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

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}
/>

任何人都可以告诉我为什么我得到这个错误以及如何删除它好吗？

Answer 1

在v16.0.1中查看source code，startDateId是 不再 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}
/>