Обработка выбора

Radix UI предоставляет мощные и настраиваемые примитивы для построения интерфейсов, среди которых Select, DropdownMenu, RadioGroup и другие элементы, обеспечивающие работу с выбором. Работа с выбором в Radix UI строится на управлении состоянием, синхронизации значений и обработке событий, что позволяет создавать полностью контролируемые или неконтролируемые компоненты.

Принципы управления выбором

В основе управления выбором лежат три ключевых аспекта:

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

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

Компонент Select

Компонент Select используется для создания выпадающих списков с возможностью выбора одного элемента. Структура типичного Select включает:

import * as Sel ect from '@radix-ui/react-select';

<Sel ect.Root value={selectedValue} onValueCha nge={setSelectedValue}>
  <Sel ect.Trigger>
    <Select.Value placeholder="Выберите опцию" />
    <Select.Icon />
  </Select.Trigger>
  <Select.Content>
    <Select.ScrollUpButton />
    <Select.Viewport>
      <Select.Item value="option1">
        <Select.ItemText>Опция 1</Select.ItemText>
        <Select.ItemIndicator />
      </Select.Item>
      <Select.Item value="option2">
        <Select.ItemText>Опция 2</Select.ItemText>
        <Select.ItemIndicator />
      </Select.Item>
    </Select.Viewport>
    <Select.ScrollDownButton />
  </Select.Content>
</Select.Root>
  • Select.Root – корневой элемент, который управляет состоянием выбора.
  • value и onValueChange – позволяют контролировать выбранное значение.
  • Select.Trigger – кнопка, открывающая выпадающий список.
  • Select.Item – отдельные опции с атрибутом value.
  • Select.ItemIndicator – визуальная индикация текущего выбора.

Обработка выбора реализуется через onValueChange, который вызывается при выборе элемента. Это позволяет обновлять состояние React или синхронизировать данные с формой.

RadioGroup и обработка выбора

RadioGroup обеспечивает выбор одной опции среди нескольких:

import * as RadioGroup fr om '@radix-ui/react-radio-group';

<RadioGroup.Root value={selectedRadio} onValueCha nge={setSelectedRadio}>
  <RadioGroup.Item value="optionA">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
  <RadioGroup.Item value="optionB">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
</RadioGroup.Root>
  • RadioGroup.Root – контейнер группы радиокнопок.
  • RadioGroup.Item – отдельная кнопка с уникальным значением.
  • RadioGroup.Indicator – отображение активного выбора.

Состояние value полностью контролирует выбранный элемент, а onValueChange позволяет реагировать на изменение выбора.

Для меню с более сложной структурой используется DropdownMenu. Обработка выбора осуществляется через события onSelect у элементов меню:

import * as DropdownMenu fr om '@radix-ui/react-dropdown-menu';

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Меню</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item onSel ect={() => console.log('Опция 1 выбрана')}>
      Опция 1
    </DropdownMenu.Item>
    <DropdownMenu.Item onSel ect={() => console.log('Опция 2 выбрана')}>
      Опция 2
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>
  • onSelect срабатывает при выборе элемента, что позволяет запускать любые пользовательские действия.
  • DropdownMenu.Item может содержать вложенные подменю, что расширяет возможности по обработке выбора в сложных интерфейсах.

Управление несколькими выборами

Для компонентов с множественным выбором, таких как Checkbox или кастомные списки, Radix UI поддерживает контроль массива значений:

import * as Checkbox fr om '@radix-ui/react-checkbox';

const [checkedItems, setCheckedItems] = React.useState([]);

<Checkbox.Root
  checked={checkedItems.includes('item1')}
  onCheckedCha nge={(state) => handleCheckboxChange('item1', state)}
>
  <Checkbox.Indicator />
</Checkbox.Root>

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

Синхронизация с формами

Radix UI компоненты легко интегрируются с библиотеками форм, такими как react-hook-form. Для этого состояние выбора связывается с полями формы:

<Select.Root
  value={formValues.select}
  onValueCha nge={(value) => setFormValue('select', value)}
>
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="a">A</Select.Item>
    <Select.Item value="b">B</Select.Item>
  </Select.Content>
</Select.Root>

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

Ключевые моменты при обработке выбора

  • Все примитивы Radix UI позволяют контролировать состояние выбора через value и onValueChange.
  • События onSelect, onCheckedChange и аналогичные предоставляют гибкий механизм реакции на действия пользователя.
  • Компоненты могут быть контролируемыми или неконтролируемыми, что позволяет использовать их в разных сценариях.
  • Интеграция с формами и глобальными состояниями осуществляется через синхронизацию значения с внешними объектами состояния.
  • Для сложных интерфейсов доступны вложенные элементы и индикаторы выбора, что улучшает UX.

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

Оглавление