悬停日期 - react-dates 库

Question

我正在使用 Airbnb 的 react-dates 库，但在文档中，我没有看到日历（单元格）中每个日期的 悬停事件.

我如何实现该逻辑？我需要它来改变状态。

这是我的代码：

render(){ return( <> <DateRangePicker startDate={this.state.startDate} startDateId="rentStartDate" endDate={this.state.endDate} endDateId="rentEndDate" onDatesChange={this.onDatesChange} focusedInput={this.state.focusedInput} onFocusChange={focusedInput => this.setState({ focusedInput })} minimumNights={1} monthFormat="MMMM YYYY" withFullScreenPortal={this.isMobile()} small={true} readOnly={true} orientation={this.isMobile() ? 'vertical' : 'horizontal'} openDirection={'up'} keepOpenOnDateSelect={true} disableScroll={false} horizontalMargin={0} onBlur={this.onDayPickerBlur} showClearDates={true} renderCalendarInfo={this.renderInfoCont} /> </> ); }

Answer 1

我是用renderDayContents做的，因为hover没有prop:

<DayPickerRangeController
  // other props here
  renderDayContents={(day) => {
    return (
      <div className="searchDay"
        onMouseEnter={() => onDateHover(day)}
        // onClick={() => day.onDayClick(day.day)}
      >{moment(day).format('D')}</div>)
  }}
/>
.....

和onDateHover：

const onDateHover = (date) => {
    console.log(date) 
}

我正在使用 DayPickerRangeController，但我想它对其他日历组件的工作方式相同。

您可以使用 and renderCalendarDay，但您需要手动设置日期元素的所有功能

悬停日期 - react-dates 库

On hover for dates - react-dates library

reactjs

react-dates