如何正确使用反应日期

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 中的源代码，不再startDateId是.requiredDateRangePickerInput

该道具位于 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}
/>