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

react-day-picker DayPickerInput不触发onDayChange事件

1 个答案: