React Dates使用报错：startDateId属性未定义的解决咨询

我之前在使用react-dates 16.x版本的时候也踩过这个坑！这个警告的原因很直接：你用的DateRangePicker组件（被withStyles包装后的版本）要求必须传入startDateId和endDateId这两个必填属性，但你的代码里完全没加这俩。

这些属性是react-dates为了满足无障碍（a11y）规范设置的，用来给日期选择器对应的输入框分配唯一的ID，方便屏幕阅读器识别。虽然你可能没在基础文档里第一时间注意到，但在这个版本里这俩是强制必填的。

解决方法很简单，给组件加上这两个属性就行： #

修改你的组件代码，添加startDateId和endDateId，赋值成任意唯一的字符串即可，比如：

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}
  // 新增以下两个必填属性
  startDateId="trip_start_date"
  endDateId="trip_end_date"
/>

你可以根据自己的业务场景给ID起更贴合的名字，只要保证这两个ID在页面里是唯一的就行。加上之后，那个prop类型的警告就会消失了。

另外补充一句：如果你后续升级react-dates到更高版本，可能会发现这些属性变成可选的了，但在你当前使用的16.0.1版本里，它们是必须传的，所以按上面的方法修改就没问题啦。

内容的提问来源于stack exchange，提问作者Strahinja Ajvaz