悬停日期-反应日期库

Question

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

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

这是我的代码：

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:没有道具

<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，但我想，它对其他日历组件的工作方式也是一样的。

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