Обработка ввода пользователя

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

Атрибуты событий

В Preact используются атрибуты событий, аналогичные стандартным DOM-событиям, но с использованием camelCase:

<input type="text" onIn put={handleInput} />
<button onCl ick={handleClick}>Нажать</button>
  • onInput — срабатывает при изменении значения поля ввода.
  • onChange — используется для отслеживания изменений на элементах формы, особенно для <select> и <input type="checkbox">.
  • onClick — обрабатывает клики по элементам.
  • onKeyDown, onKeyUp, onKeyPress — реагируют на нажатия клавиш.

Атрибут события принимает функцию обработчика, которая получает объект события (event) в качестве аргумента.

Обработчики событий

Обработчики в Preact могут быть объявлены как обычные функции или стрелочные функции:

function handleInput(event) {
  console.log(event.target.value);
}

const handleClick = () => {
  alert("Кнопка нажата");
};

event.target предоставляет доступ к элементу, вызвавшему событие, а event.target.value — текущее значение поля ввода.

Управляемые компоненты

Для удобного контроля состояния ввода используется управляемый компонент, где значение элемента связывается с состоянием компонента:

import { h } from 'preact';
import { useState } from 'preact/hooks';

function TextInput() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <input type="text" value={text} onIn put={handleChange} />
  );
}
  • useState хранит текущее значение поля.
  • Атрибут value синхронизирует состояние компонента с DOM.
  • Любое изменение значения через onInput обновляет состояние и, соответственно, отображение.

Обработка форм

Формы требуют особого внимания, особенно для предотвращения стандартного поведения браузера при отправке:

function FormExample() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Отправлено значение:', inputValue);
  };

  return (
    <form onSub mit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onIn put={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">Отправить</button>
    </form>
  );
}
  • onSubmit используется для обработки отправки формы.
  • event.preventDefault() предотвращает перезагрузку страницы.
  • Состояние формы хранится в useState, обеспечивая реактивность интерфейса.

Динамическая обработка нескольких полей

Для больших форм с множеством полей удобно использовать один обработчик для нескольких элементов:

function MultiFieldForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onIn put={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onIn put={handleChange}
      />
    </form>
  );
}
  • Использование атрибута name позволяет одному обработчику различать поля.
  • ...formData создаёт копию состояния с обновлением только изменённого свойства.

Доступ к нативным элементам через refs

Иногда требуется работать напрямую с DOM-элементами, минуя управляемое состояние:

import { useRef } from 'preact/hooks';

function RefExample() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onCl ick={focusInput}>Фокус на поле</button>
    </>
  );
}
  • useRef создаёт ссылку на элемент.
  • ref={inputRef} связывает DOM-узел с объектом ref.
  • inputRef.current предоставляет доступ к нативным методам, таким как focus().

Особенности работы с Preact

  • Preact оптимизирует события, используя event delegation, поэтому обработчики назначаются на корневой элемент, а не на каждый отдельный элемент.
  • Атрибут onInput предпочтительнее onChange для текстовых полей, так как срабатывает мгновенно при каждом вводе.
  • Обработчики событий можно комбинировать с хуками состояния для построения сложной логики интерфейса.

Практические рекомендации

  • Использовать управляемые компоненты для синхронизации состояния и интерфейса.
  • Минимизировать количество функций обработчиков, объединяя их для схожих действий.
  • Для быстрого доступа к DOM-узлам применять useRef.
  • Предпочитать onInput вместо onChange для текстовых полей.
  • Всегда предотвращать стандартное поведение форм через event.preventDefault() при необходимости контролировать отправку.

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

Оглавление