ant使用calender自定义头部，区分onPanelChan

问题场景： 如下图，利用calender自定义一个头部，中间显示年月，左右点击切换月份。点击具体日期直接跳转页面

企业微信截图_16276253899237.png

具体实现代码,主要使用headerRender 就行

const PriceDate: FC<{ params: any }> = ({ params }) => {
  const { data, refetch, isFetching } = useFetchCalenderPrice(params)
  const { push } = useHistory()
  const dispatch = useDispatchBarState()
  const result = (data as any)?.data ?? {}
  const list = Object.values(result).flat()

  useEffect(() => {
    // 触发全局的loading
    dispatch && dispatch({ isFetching })
  }, [isFetching])

  useEffect(() => {
    params && refetch()
  }, [params])
  if (isFetching) return null
  return (
    <div className={styles.calendar}>
      <Calendar
        fullscreen={false}
        disabledDate={time => {
          const value = time.format('YYYY-MM-DD')
          return (
            list.findIndex(
              item =>
                (item as any).validDate === value &&
                (item as any).formulaType !== 3,
            ) === -1
          )
        }}
        headerRender={({ value, onChange }) => {
          const selectMonth = value.month() + 1
          return (
            <div className={styles['calender-title']}>
              <div className={'w-12 text-center'}>
                <LeftCircleFilled
                  className={
                    'text-lg text-light  cursor-pointer hover:text-link'
                  }
                  onClick={() => {
                    const newValue = value.clone()
                    newValue.month(value.month() - 1)
                    onChange(newValue)
                  }}
                />
              </div>
              <span className={'flex-1 text-center'}>
                {value.year()}年{selectMonth}月
              </span>
              <div className={'w-12 text-center'}>
                <RightCircleFilled
                  className={
                    'text-lg text-light cursor-pointer hover:text-link'
                  }
                  onClick={() => {
                    const newValue = value.clone()
                    newValue.month(value.month() + 1)
                    onChange(newValue)
                  }}
                />
              </div>
            </div>
          )
        }}
      />
    </div>
  )
}

问题来了：header上左右点击事件，为了能够切换月份，都会执行renderHeader中的onChange事件。这一执行就会导致文档中的三个方法都会执行：onSelect，onChange，onPanelChange。但是我要做到点击具体日期就跳转页面，那我怎么区分点击header的事件和点击具体日期的事件呢？

解决：自定义渲染日历单元格，把点击具体日期的时间写在里面

        dateFullCellRender={time => {
          const date = time.format('DD')
          const value = time.format('YYYY-MM-DD')
          const same: any = list.find(item => (item as any).validDate === value)
          // if (!same) return null
          return (
这里点击单元格就跳转页面， 样式还是使用原日历样式
            <div
              className={
                'ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today'
              }
              onClick={() => {
                push({
                  pathname: '/ticket/booking',
                  state: {},
                })
              }}
            >
              {same ? (
                <>
                  <p>{date}</p>
                  <p className={`${same.formulaType == 3 ? '' : 'cell'}`}>
                    {same.formulaType == 3 ? '已售罄' : `￥${same.salePrice}`}
                  </p>
                </>
              ) : (
                <p>{date}</p>
              )}
            </div>
          )
        }}