Предотвращение дефолтного поведения

В React Aria управление событиями и предотвращение дефолтного поведения элементов является ключевым аспектом для создания доступного и интерактивного интерфейса. В отличие от обычного DOM, React Aria обеспечивает абстракции, которые упрощают работу с событиями, сохраняя при этом соответствие стандартам доступности (ARIA).

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

Любой интерактивный элемент может иметь дефолтное поведение браузера. Например, кнопка внутри формы по умолчанию вызывает отправку формы, а нажатие клавиши Enter в input может инициировать событие submit. Для контроля над этими действиями используется метод event.preventDefault():

import { useButton } from '@react-aria/button';

function CustomButton(props) {
  let { buttonProps } = useButton(props);

  function handleClick(event) {
    event.preventDefault(); // предотвращает дефолтное действие
    console.log("Кнопка нажата");
  }

  return <button {...buttonProps} onCl ick={handleClick}>Нажми меня</button>;
}

Ключевой момент: useButton из React Aria автоматически обрабатывает события клавиатуры (Enter, Space) для соблюдения стандартов доступности. Вызов preventDefault() внутри обработчика позволяет подавить стандартное поведение, не нарушая ARIA-семантику.

Предотвращение дефолтного поведения клавиатуры

Для компонентов управления, таких как Menu, ListBox или Dialog, важно контролировать поведение клавиш. Например, при навигации стрелками в меню браузер по умолчанию может прокручивать страницу. React Aria предоставляет хуки, которые возвращают свойства для безопасного перехвата событий:

import { useMenuItem } from '@react-aria/menu';

function MenuItem(props) {
  let ref = React.useRef();
  let { menuItemProps } = useMenuItem(props, ref);

  function handleKeyDown(event) {
    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
      event.preventDefault(); // подавляем скролл страницы
      console.log(`Навигация: ${event.key}`);
    }
  }

  return <div {...menuItemProps} ref={ref} onKeyD own={handleKeyDown}>
    {props.children}
  </div>;
}

Важно: React Aria формирует правильные ARIA-атрибуты (aria-selected, aria-disabled и т.д.), поэтому использование preventDefault() не нарушает доступность, если событие обрабатывается в пределах компонента.

Интеграция с формами и onSubmit

При работе с формами нередко требуется кастомное поведение вместо стандартной отправки. Комбинация React Aria и preventDefault() позволяет сохранять контроль:

import { useForm } from '@react-aria/form';

function CustomForm() {
  let { formProps } = useForm({ onSubmit: (data) => console.log(data) });

  function handleSubmit(event) {
    event.preventDefault(); // предотвращает дефолтное отправление формы
    // кастомная обработка данных формы
    console.log("Форма обработана вручную");
  }

  return (
    <form {...formProps} onSub mit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Совет: при использовании useForm необходимо учитывать, что React Aria может добавлять дополнительные обработчики событий. Вызов preventDefault() не мешает этим обработчикам, если они находятся в хуках библиотеки.

Управление дефолтным поведением для кастомных интерактивных элементов

При создании нестандартных элементов управления, таких как переключатели (Switch) или кастомные чекбоксы, React Aria предоставляет хуки (useSwitch, useCheckbox), которые уже включают обработку клавиатуры. Важно использовать preventDefault() только при необходимости изменить стандартное действие браузера:

import { useSwitch } from '@react-aria/switch';

function CustomSwitch(props) {
  let ref = React.useRef();
  let { inputProps } = useSwitch(props, ref);

  function handleKeyPress(event) {
    if (event.key === ' ') {
      event.preventDefault(); // предотвращает скролл при пробеле
      inputProps.onChange(!props.isSelected);
    }
  }

  return <div tabIndex={0} ref={ref} onKeyD own={handleKeyPress}>
    {props.isSelected ? "Вкл" : "Выкл"}
  </div>;
}

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

Рекомендации по использованию

  1. Только там, где нужно: не следует применять preventDefault() массово на всех событиях — это может нарушить привычное взаимодействие пользователей.
  2. Сохранять ARIA-семантику: всегда использовать хуки React Aria, чтобы атрибуты и события оставались корректными.
  3. Комбинировать с кастомной логикой: после подавления дефолтного поведения можно безопасно вызывать собственные функции обработки.
  4. Тестировать на клавиатуре и скринридерах: предотвращение дефолтного поведения не должно ломать доступность.

Использование preventDefault() в React Aria обеспечивает контроль над действиями браузера без ущерба для доступности, позволяя создавать богатые интерактивные интерфейсы, соответствующие стандартам ARIA.

Оглавление