Библиотеки для работы с формами

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

Управление состоянием форм

Формы в Preact чаще всего строятся с использованием контролируемых компонентов. Контролируемый компонент — это элемент формы, значение которого полностью управляется состоянием компонента.

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

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ email, password });
  };

  return (
    <form onSub mit={handleSubmit}>
      <input 
        type="email" 
        value={email} 
        onIn put={(e) => setEmail(e.target.value)} 
        placeholder="Email" 
      />
      <input 
        type="password" 
        value={password} 
        onIn put={(e) => setPassword(e.target.value)} 
        placeholder="Пароль" 
      />
      <button type="submit">Войти</button>
    </form>
  );
}

Ключевой момент: в Preact используется событие onInput вместо стандартного onChange для отслеживания изменений текста в input. Это связано с особенностями реализации виртуального DOM.

Валидация данных

Валидация может выполняться как на уровне HTML-атрибутов (required, pattern), так и программно. Программная валидация дает больше контроля и позволяет отображать сообщения об ошибках внутри компонента.

function RegistrationForm() {
  const [username, setUsername] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (username.length < 3) newErrors.username = 'Имя слишком короткое';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      console.log('Форма валидна', username);
    }
  };

  return (
    <form onSub mit={handleSubmit}>
      <input
        value={username}
        onIn put={(e) => setUsername(e.target.value)}
        placeholder="Имя пользователя"
      />
      {errors.username && <div style={{ color: 'red' }}>{errors.username}</div>}
      <button type="submit">Зарегистрироваться</button>
    </form>
  );
}

Ключевой момент: состояние ошибок хранится отдельно, что позволяет гибко отображать сообщения для каждой формы и каждого поля.

Использование сторонних библиотек

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

  • preact-hook-form — облегчённая адаптация популярной React-библиотеки react-hook-form.
  • formik-preact — обёртка для Formik, позволяющая использовать декларативную валидацию и работу с полями.
  • yup — библиотека для схемной валидации, интегрируется с любым хендлером форм.

Пример использования preact-hook-form:

import { h } from 'preact';
import { useForm } from 'preact-hook-form';

function ContactForm() {
  const { register, handleSubmit, errors } = useForm();

  const onSub mit = (data) => {
    console.log('Данные формы', data);
  };

  return (
    <form onSub mit={handleSubmit(onSubmit)}>
      <input 
        {...register('name', { required: 'Имя обязательно' })} 
        placeholder="Имя" 
      />
      {errors.name && <span>{errors.name.message}</span>}

      <input 
        {...register('email', { 
          required: 'Email обязателен', 
          pattern: { value: /\S+@\S+\.\S+/, message: 'Неверный формат email' } 
        })} 
        placeholder="Email" 
      />
      {errors.email && <span>{errors.email.message}</span>}

      <button type="submit">Отправить</button>
    </form>
  );
}

Особенности подхода:

  • Регистрация полей через register позволяет автоматически отслеживать их значения и ошибки.
  • Валидация выполняется до вызова onSubmit, что минимизирует лишние ререндеры.
  • Интеграция с библиотеками типа yup упрощает сложные схемы проверки данных.

Асинхронная обработка и серверная валидация

Формы в Preact легко интегрируются с асинхронными функциями. Можно выполнять проверку на сервере до окончательной отправки данных:

async function checkUsernameAvailability(username) {
  const response = await fetch(`/api/check-username?username=${username}`);
  const result = await response.json();
  return result.available;
}

function AsyncValidationForm() {
  const [username, setUsername] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (await checkUsernameAvailability(username)) {
      console.log('Имя доступно');
    } else {
      setError('Имя уже занято');
    }
  };

  return (
    <form onSub mit={handleSubmit}>
      <input
        value={username}
        onIn put={(e) => setUsername(e.target.value)}
        placeholder="Имя пользователя"
      />
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <button type="submit">Проверить</button>
    </form>
  );
}

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

Оптимизация и производительность

  • Использование контролируемых компонентов требует внимательного управления состоянием, особенно при большом количестве полей.
  • Для снижения ререндеров можно применять useMemo и useCallback для вычисляемых значений и обработчиков.
  • При работе с большим числом форм рекомендуется использовать специализированные библиотеки (hook-form, formik) для минимизации кода и ошибок.

Итоговые практики

  1. Контролировать значение через состояние компонента.
  2. Разделять ошибки и значения полей для удобного управления.
  3. Применять HTML-валидацию и программную проверку одновременно.
  4. Использовать сторонние библиотеки при сложных формах и схемах.
  5. Поддерживать асинхронные проверки для серверной валидации.
  6. Оптимизировать ререндеры при большом количестве полей через мемоизацию и специализированные хуки.

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

Оглавление