問題場景： 如下圖，利用calender自定義一個頭部，中間顯示年月，左右點擊切換月份。點擊具體日期直接跳轉(zhuǎn)頁面

企業(yè)微信截圖_16276253899237.png

具體實現(xiàn)代碼,主要使用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(() => {
    // 觸發(fā)全局的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上左右點擊事件，為了能夠切換月份，都會執(zhí)行renderHeader中的onChange事件。這一執(zhí)行就會導(dǎo)致文檔中的三個方法都會執(zhí)行：onSelect，onChange，onPanelChange。但是我要做到點擊具體日期就跳轉(zhuǎn)頁面，那我怎么區(qū)分點擊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 (
這里點擊單元格就跳轉(zhuǎn)頁面， 樣式還是使用原日歷樣式
            <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>
          )
        }}