Усилить свои поля ввода с логикой ожидания

Автор оригинала: Jesse Langford.

Поля ввода, которые ждут пользователя, чтобы заканчивать печатать перед выполнением действия, являются общими функциями в веб-приложениях. Они могут быть сложными, чтобы работать, поэтому я хотел показать, как я включил таймер ожидания в моих полях ввода.

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

Для моего примера, я использую React, TymerctScript и Material Ui.

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

пример

interface IProps extends OutlinedTextFieldProps {  
  waitForInput: boolean
}

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

const { waitForInput, ...inputProps } = props

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

const [waitEvent, setWaitEvent] = useState>(null)

Это где я храним текстовое поле Onchange, пока мы ждем, пока пользователь перестанет печатать.

useEffect(() => {
  let timer = 0
  if (waitEvent && waitForInput) {
    timer = setTimeout(() => inputProps.onChange(waitEvent), 1000)
  }
  return () => clearTimeout(timer)
}, [waitEvent])

Я использую использование использования, чтобы обработать мою логику ожидания. Он будет перезапущен каждый раз, когда kaitevent обновляется. Если waitevent и waitfornput – это правда, каждое изменение сбросит тайм-аут, чтобы дождаться 1 секунды.

const onChange = (event: React.ChangeEvent) => {
  if (waitForInput) {
    event.persist() <- only for React 16 and earlier
    setWaitEvent(event)
  } else {
    inputProps.onChange(event)
  }
}

Замена стандартной функции Onchange. Добавляет проверку, если мы должны использовать логику ожидания или продолжаться как обычно.

return 

Верните стандартный элемент Text Text Text при распространении всех наших свойств. Определение Onchange должно прийти после распространения входных данных.

 alert(e.target.value)}
/>

Теперь вы можете использовать компонент именно так, как вы бы, если это был оригинальный элемент UI. С добавленной собственностью Waitforinput доступно.