react日期选择器DayPickerInput未在DayChange事件上启动

Question

我们正在从react day picker的5.5.3版本升级到最新版本(7.1.10(。我查看了文档中的更改，并相应地修改了我们的代码。我甚至更改了我们的代码，使其看起来像文档中的代码，但在从日历中选择日期时，我无法启动onDayChange事件。

handleDayChange函数从不启动。我不知道为什么不。我错过了什么？

import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import './input-with-calendar.scss'
const dateFormat = 'MM/DD/YYYY'
export default class InputWithCalendar extends React.Component {
constructor(props) {
super(props)
this.handleDayChange = this.handleDayChange.bind(this)
this.state = { selectedDay: undefined }
}
handleDayChange(day) {
console.log('In handleDayChange')
this.setState({ selectedDay: day })
}
render() {
const { selectedDay } = this.state
return (
<div className='input-with-calendar'>
<div className='overlay-date-picker-container'>
{selectedDay && <p>Day: {selectedDay.toLocaleDateString()}</p>}
{!selectedDay && <p>Choose a day</p>}
<DayPickerInput onDayChange={this.handleDayChange} />
</div>
</div>
)
}
}

这是5.5.3代码。。。这适用于

import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import './input-with-calendar.scss'
import moment from 'moment'
const dateFormat = 'MM/DD/YYYY'
const formatDate = (date) => {
return date && moment(date).format(dateFormat)
}
class InputWithCalendar extends React.Component {
componentWillMount () {
this.props.onDateChange(this.props.selectedDate)
}
render () {
return (
<div className='input-with-calendar'>
<div className='input-with-calendar-filter-label'>Date</div>
<div className='overlay-date-picker-container'>
<DayPickerInput
readOnly
value={formatDate(this.props.selectedDate)} // value is expected to be a string
placeholder={dateFormat}
onDayChange={(dateAsMoment) => this.props.onDateChange(dateAsMoment && dateAsMoment.toDate())}
dayPickerProps={{
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
disabledDays: { before: new Date() }
}}
/>
</div>
</div>
)
}
}
export default InputWithCalendar

Answer 1

我相信您缺少value道具：

<DayPickerInput 
value={this.state.selectedDay} 
onDayChange={this.handleDayChange} 
/>

请参阅http://react-day-picker.js.org/examples/input-state