#javascript #reactjs #momentjs #antd
#javascript #reactjs #momentjs #antd
Вопрос:
Мы используем antd для выбора даты и моментов в качестве утилиты. Я застрял на неделю в этой ПРОБЛЕМЕ.Дело в том, что на боковой панели фильтра при нажатии кнопки очистить все поля должны быть очищены или установлены их значения по умолчанию (в случае выпадающего списка).Но пикет даты не сбрасывается.
На приведенном выше рисунке показан компонент Activity, а слева — его фильтр.Базовый фильтр с изменением API из серверной части при каждом событии действия.
useEffect(()=>{
if(clearFilter){
form.resetFields()
setActivitySearchText('')
setFromDate('')
setToDate('')
setStatusSearchText('')
onStatusChange('')
setClearFilter(false)
}
},[clearFilter])
const onChangeFromDate = dateString => {
setFromDate(new Date(dateString).toISOString())
}
const onPageToDate = dateString => {
setToDate(new Date(dateString).toISOString())
}
<StyledDatePicker
allowClear={false}
format={dateFormat}
disabledDate={disabledFromDate}
placeholder={'From'}
onChange={(fromdate, dateString) =>
onChangeFromDate(fromdate, dateString)
}
showTime={{
use12Hours: true,
defaultValue: moment('00:00:00', 'HH:mm:ss'),
}}
/>
<StyledDatePicker
format={dateFormat}
disabledDate={disabledToDate}
placeholder={'To'}
onChange={(todate, dateString) => onPageToDate(todate, dateString)}
showTime={{ use12Hours: true }}
/>
Приведенный выше код является индексным файлом для всех компонентов, мы будем передавать clearfilter
prop, если это true, для компонентов фильтра установлено значение empty.Он StyledDatePicker
просто завернут в стилизованные компоненты некоторой пользовательской ширины. вот и все.
Вы можете четко видеть, onChangeFromDate()
и onPageToDate()
происходят ли функции событий при изменении onChange
. Как я уже сказал выше, я устанавливаю время setFromDate('')
и setTodate('')
время clearFilter
true
.
Чтобы дать некоторый контекст, это еще один основной файл, из которого реквизиты передаются другим.Там мы определяем setFromDate('')
и setTodate('')
как,
const [fromDate, setFromDate] = useState('')
const [toDate, setToDate] = useState('')
Я думаю, что я дал достаточно подробностей. Если что-нибудь понадобится, запросите, я готов дать. Это живой проект, я застрял на неделю.Заранее спасибо!
Комментарии:
1. Привет, Aashiq, я создал песочницу с рабочим примером, близким к вашему коду. Взгляните и попытайтесь найти различия в вашем коде. codesandbox.io/s/advanced-search-antd4112-forked-k1y6y
2. Да, спасибо, чувак, мне не хватало
value
реквизита, и небольшое предостережение в том, что мы используем and 3.x, как младший разработчик, я не могу изменить пакет / обновление, вы правильно знаете, это большой проект. кстати, извините за поздний ответ 😉