reactjs - 如何正确使用 react 日期

Question

我在 react 日期方面遇到问题。我最终得到了这个警告:

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

查看source code在 v16.0.1 中，startDateId 不再 DateRangePickerInput 的 required 属性。

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