Блог

Главная - Вопросы по программированию - Как мне очистить datepicker и номер ввода после onClick react перехватов

Как мне очистить datepicker и номер ввода после onClick react перехватов

#javascript #reactjs #react-hooks

#javascript #reactjs #реагировать-перехваты

Вопрос:

Я хочу сбросить значения datepicker и входных файлов после фильтрации моих бронирований при вызове onClick, чтобы пользователь должен был каждый раз создавать новый onClick с пустым полем ввода / datepicker. Это то, что у меня есть до сих пор:

 const intaialValue = {
  date: null,
  time: null,
}

const Bookings = () => {
  const [date, setDate] = useState()
  const [time, setTime] = useState([])


  const getBookingsDateAndTime = async () => {
    const response = await Axios.get(`http://localhost:4000/bookings/date/${moment(new Date(date)).format('YYYY-MM-DD')}/${time}`);
    console.log(response.data);

    setDate(response);
    setTime(response);
    setBookings(response.data.data.bookings);

    setDate(intaialValue)
  }


   <button type="button" className="btn btn-primary btn-sm" onClick={() => getBookingsDateAndTime()}>Filter</button>

Но поля не очищаются при вызове onClick с кнопки фильтра:

Эти поля не очищаются при нажатии на кнопку фильтра

Комментарии:

1. Я думаю, что вы не передаете правильное значение в setDate и setTime. Что печатает ваш console.log?

2. Он выводит это на консоль: localhost:4000 / bookings / date /2020-10-20 / 21:00 , я хочу очистить datepicker и очистить поле ввода для времени при onClick.

Ответ №1:

Вы не должны устанавливать дату и время пустыми, поскольку они являются недопустимым форматом для отображения значений даты и времени в пользовательском интерфейсе.

Ответ №2:

Попробуйте использовать перехват useEffect для бронирований или переменной состояния, которую вы используете для задания ответа от api. когда установлено значение bookings, тогда setDate() null или empty .

useEffect(()=>{setDate()},[заказы])