Root и Field

Radix UI — это библиотека компонентов для React, ориентированная на создание доступных и настраиваемых интерфейсов. Одним из ключевых паттернов при работе с формами в Radix UI являются компоненты Root и Field, которые обеспечивают удобное управление состоянием, валидацию и интеграцию с внешними библиотеками форм.

Root

Компонент Root в Radix UI выполняет роль контейнера для всей формы или группы связанных полей. Основные функции Root:

  • Управление состоянием формы: Root хранит внутреннее состояние полей, включая значения, ошибки и статус валидации. Это позволяет централизованно управлять всей формой.
  • Валидация и ошибки: Root может обрабатывать глобальные правила валидации, а также агрегировать ошибки отдельных Field.
  • Интеграция с внешними формами: Root легко интегрируется с библиотеками типа React Hook Form или Formik через кастомные обработчики и пропсы.

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

import * as Form from '@radix-ui/react-form';

function MyForm() {
  return (
     console.log(data)}>
      {/* Поля формы */}
    
  );
}

Ключевые пропсы Root:

  • onSubmit: функция, вызываемая при успешной отправке формы. В неё передаётся объект со всеми значениями полей.
  • onInvalidSubmit: функция, вызываемая при попытке отправки формы с ошибками.
  • defaultValues: объект с начальными значениями полей формы.
  • disabled: булевое значение, которое делает все поля формы неактивными.

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

Field

Компонент Field представляет отдельное поле формы и отвечает за:

  • Привязку значения: Field синхронизирует своё состояние с Root, обеспечивая актуальные данные для отправки формы.
  • Валидацию на уровне поля: каждое Field может иметь собственные правила проверки данных.
  • Отображение ошибок: Field может автоматически показывать сообщения об ошибках, используя компонент Message.

Пример Field:


  Email
  
    
  
  Email обязателен
  Некорректный формат email

Основные части Field:

  • Label — метка поля. Связывается с контролом через контекст Field.
  • Control — компонент ввода (input, select, textarea). Использует asChild, чтобы можно было передавать нативные элементы или кастомные компоненты.
  • Message — отображает ошибки или подсказки. С помощью пропса match можно указать тип ошибки, на который нужно реагировать.
  • Description — дополнительная информация о поле (не обязательна).

Пропсы Field:

  • name — уникальное имя поля, которое используется для формирования объекта данных при отправке формы.
  • required — булевое значение, указывающее обязательность заполнения поля.
  • validate — функция валидации, которая принимает значение и возвращает строку с ошибкой или undefined при успешной проверке.

Взаимодействие Root и Field

Корреляция между Root и Field строится через контекст. Root предоставляет объект состояния и методы для обновления значений и ошибок, а Field автоматически подключается к этому контексту. Это позволяет:

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

Пример с несколькими полями:

 console.log('Submitted data:', data)}
  onInvalidSub mit={(errors) => console.log('Errors:', errors)}
>
  
    Имя пользователя
    
      
    
    Поле обязательно
  

  
    Пароль
    
      
    
    Пароль обязателен

В этом примере Root собирает значения username и password и обеспечивает обработку ошибок через компоненты Message, не требуя дополнительной логики управления состоянием.

Оглавление