Расширьте поля ввода с помощью логики ожидания

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

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

В моем примере я использую React, Typescript и Material UI.

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

пример

interface IProps extends OutlinedTextFieldProps {  
  waitForInput: boolean
}

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

const { waitForInput, ...inputProps } = props

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

const [waitEvent, setWaitEvent] = useState<React.ChangeEvent<HTMLInputElement>>(null)

Здесь я сохраняю текстовое поле события onChange, пока мы ждем, пока пользователь перестанет печатать.

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

Я использую useEffect для обработки логики ожидания. Он будет перезапускаться каждый раз, когда обновляется waitEvent. Если waitEvent и waitForInput верны, каждое изменение будет сбрасывать тайм-аут на 1 секунду ожидания.

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

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

return <TextField {...inputProps} onChange={onChange} />

верните стандартный компонент текстового поля Material UI, распространяя все наши свойства. Назначение onChange должно происходить после распространения inputProps.

<ExtendedInput
  waitForInput
  variant="outlined"
  label="Extended Input"
  onChange={(e) => alert(e.target.value)}
/>

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *