需求場(chǎng)景： 只能選擇一個(gè)月區(qū)間 31天，并且只能選擇當(dāng)天之前的笛臣，并且往前時(shí)間不超過(guò)一年云稚。假設(shè)一個(gè)模塊內(nèi)多個(gè)頁(yè)面有這個(gè)需求，需要統(tǒng)一沈堡。
封裝目的效果静陈，不用寫重復(fù)判斷以及冗余的函數(shù)，保持通用便捷性诞丽。
最終效果：
源碼：
import React, { useEffect, useState } from 'react'
import { DatePicker, } from 'antd'
import moment from 'moment'
const { RangePicker } = DatePicker
const WrapRangePickerHoc = ({ value: propsValue, onChange }) => {
const [dates, setDates] = useState([])
const [hackValue, setHackValue] = useState()
const [value, setValue] = useState(propsValue)
// 只能選擇一個(gè)月區(qū)間 31天鲸拥，并且只能選擇當(dāng)天之前的，往前時(shí)間不超過(guò)一年
const rangeDisableDate = (currentDate) => {
const onlyOnlyYear = currentDate && currentDate < moment().subtract(1, 'years')
const onlyToday = currentDate && currentDate > moment().endOf('day')
if (!dates || dates.length === 0) {
return onlyToday || onlyOnlyYear
}
const tooLate = dates[0] && currentDate.diff(moment(dates[0]), 'days') > 31
const tooEarly = dates[1] && moment(dates[1]).diff(currentDate, 'days') > 31
return tooEarly || tooLate || onlyOnlyYear || onlyToday
}
const onOpenChange = open => {
if (open) {
setHackValue([])
setDates([])
} else {
setHackValue(undefined)
}
}
useEffect(() => {
setValue(propsValue)
}, [propsValue])
const handleOnChange = (val, dateStr) => {
onChange(val, dateStr)
}
return (
<RangePicker
allowClear={false}
value={hackValue || value}
disabledDate={rangeDisableDate}
onCalendarChange={val => setDates(val)}
onChange={handleOnChange}
onOpenChange={onOpenChange}
/>
)
}
export default WrapRangePickerHoc
調(diào)用如下率拒，只需要傳入默認(rèn)值崩泡，和回調(diào)事件就可以禁荒，不用每次使用都寫禁止選用日期的條件：
import React, { Component } from 'react'
class IndexReset extends Component {
constructor(props) {
super(props)
this.state = {
value: [],
}
}
handlePicker = (date, dateStr) => {
//.......
}
render() {
const { value,} = this.state
return (
<RangePickerHoc onChange={this.handlePicker} value={value}/>
)
}
}
export default IndexReset
