Input Component

Свойства

• value (string):
  Значение поля ввода. Если используется store, этот параметр будет игнорироваться.
• placeholder (string):
  Текст, который будет отображаться в поле ввода, если оно пустое.
• readonly (boolean, по умолчанию: false):
  Определяет, будет ли поле ввода только для чтения.
• disabled (boolean, по умолчанию: false):
  Отключает поле ввода, делая его неактивным.
• name (string):
  Имя поля ввода. Используется при взаимодействии с store, если он передан.
• leftIcon (string | Node | jsx.JSX.ArrayElement):
  Иконка, отображаемая слева от поля ввода. Может быть строкой (название иконки) или React-элементом.
• rightIcon (string | Node | jsx.JSX.ArrayElement):
  Иконка, отображаемая справа от поля ввода. Может быть строкой (название иконки) или React-элементом.
• waiting (boolean, по умолчанию: false):
  Если true, вместо правой иконки отображается спиннер, указывающий на ожидание.
• autofocus (boolean, по умолчанию: false):
  Автоматически фокусирует поле ввода при монтировании компонента.
• formId (string):
  Идентификатор формы, к которой привязано это поле ввода.
• store ([get: any, set: (field: string, value: string) => void]):
  Связь с внешним хранилищем данных. Первый элемент массива отвечает за получение данных, второй — за их обновление.
• stopPropagation (boolean, по умолчанию: false):
  Если true, блокирует дальнейшее распространение событий кликов и мыши.
• onInput ((value: string, event?: InputEvent) => void):
  Функция-обработчик, вызываемая при изменении значения поля ввода. Возвращает текущее значение и событие.

События

• onInput ({value: string, event?: InputEvent} => void)
  Обработчик, который вызывается при каждом изменении значения в поле ввода. Он обновляет значение поля в store, если тот предоставлен, и вызывает пользовательскую функцию props.onInput, если она передана.
• onClick ({event: MouseEvent} => void)
  Обработчик клика по полю ввода. В случае, если поле обернуто в контейнер с иконками (или без них), этот обработчик может быть не назначен напрямую на само поле, но будет использоваться для остановки распространения события при клике по обертке, если установлено свойство stopPropagation.
• onMouseDown ({event: MouseEvent} => void)
  Обработчик события нажатия кнопки мыши. Если свойство stopPropagation установлено в true, то событие не будет передаваться дальше (например, чтобы предотвратить выполнение других кликов на родительских элементах).
• onMount *()
  Обработчик, который срабатывает при монтировании компонента. Используется, чтобы автоматически установить фокус на поле ввода, если передано свойство autofocus.
• stopPropagationHandler ({event: MouseEvent} => void)
  Специальная функция для предотвращения распространения событий клика и нажатия мыши, если установлено свойство stopPropagation. Она блокирует передачу этих событий на родительские элементы.

Ключевые моменты

• onInput — это основное событие, обрабатывающее изменение значения в поле ввода и передающее обновления в хранилище (store) или внешние обработчики.
• onClick и onMouseDown — используются для предотвращения распространения событий кликов и нажатий на родительские элементы, если это требуется.
• onMount — обеспечивает автофокусировку, если свойство autofocus установлено в true.

Примеры использования