如何正确使用反应日期

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

如何正确使用反应日期

How to use react dates properly

reactjs

react-redux

react-dates