Блог

Мы используем 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('')

 

Я думаю, что я дал достаточно подробностей. Если что-нибудь понадобится, запросите, я готов дать. Это живой проект, я застрял на неделю.Заранее спасибо!