2

我正在使用 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}
      />
    </>
  );
}
4

1 回答 1

0

我这样做了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，但我想它对其他日历组件的工作方式相同。

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

于 2021-02-12T12:23:40.367 回答