使用react-date http://airbnb.io/react-dates

Question

我使用这个npm https://www.npmjs.com/package/react-dates

我就是这么做的

import { SingleDatePicker } from 'react-dates';
and in my render function I do

<SingleDatePicker id="date" />

...that就是它，它起作用了。我尝试将SingleDatePicker更改为它的第二个API，根据文档，它是DateRangePicker。我可以看到它被渲染了，但当我单击它时，它什么也不做。我不知道出了什么问题，我的控制台中没有错误。

Answer 1

react-dates README列出了SingleDatePicker组件所需的属性及其类型：

<SingleDatePicker
  date={this.state.date} // momentPropTypes.momentObj or null
  onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired
  focused={this.state.focused} // PropTypes.bool
  onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
/>

要处理用户交互，您必须为onFocusChanged提供一个函数，并为聚焦的属性提供一个布尔值(如上所示)。使用上面的实现，您只需要在状态中添加一个初始的focused值。

即。state = {... focused: false}

请注意，您将需要使用moment包向date属性提供日期对象。