Реагирование: очистка / замена пользовательского ввода (напрямую)

#reactjs #date #input #sanitize

#reactjs #Дата #входные данные #дезинфицировать

Вопрос:

Как дела, ребята,

В настоящее время я пишу компонент React (DateFormatter) для пользователей, чтобы они могли быстро вводить даты и время с помощью (цифр) чисел вместо использования календаря.

Так, например, если кто-то записывает дату с литералами или без них, ее следует исправить непосредственно в правильный формат ((дд / мм / гггг) amp; (мм / дд / гггг) для американского / немецкого макета). Чтобы немного упростить различение между 0, я использую синтаксис .

  expect(dateFormatter("12/16/5---0")).toBe("12/16/5---");
 

Я уже написал тест для этого, как он должен работать и какие числа разрешены технически
, вот мой пример кода.

В настоящее время я получаю оперативный ввод пользователя через React onChange следующим образом:

   const inputValue = date.target.value;
 

В конце я просто хочу использовать DateFormatter(inputValue), чтобы очистить все и отправить обратно.
Как я могу этого добиться?
Моя текущая идея была с заменой if cases regex, но на самом деле я понятия не имею.

Заранее благодарю.

02112009 => 02/11/2009

Ответ №1:

Вы пробовали прямой подход? Что-то вроде:

 function Input() {
  const [value, setValue] = useState('');
  return (
    <input
      onChange={e => setValue(dateFormatter(e.target.value))}
      value={value}
    />
  );
}
 

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

1. Это моя идея, lmao. Мне просто интересно, каким был бы наиболее эффективный способ, чтобы гарантировать форматированную дату, а не как вызвать метод.