reactjs - react-dates 抛出警告信息

Question

我在处理这段代码时遇到了麻烦。我做了以下事情：

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

从文档中，它说这就是代码工作所需要的一切。我收到一条警告，内容如下：

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

有谁知道我需要做什么才能摆脱它？

Answer 1

通过查看 DateRangerPicker 的 react-dates 库的文档，我发现该组件还有 2 个要求才能正常工作。

<DateRangePicker
  startDate={this.state.startDate} // momentPropTypes.momentObj or null,
  startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
  endDate={this.state.endDate} // momentPropTypes.momentObj or null,
  endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
  focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
  onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
/>

您缺少 startDateID 和 endDateId。