Общие компоненты (например, <div>)

• Справочник
  • Общие компоненты (например, <div>)
  • ref функция обратного вызова
  • Объект события React
  • AnimationEvent функция обработчика
  • ClipboardEvent функция обработчика
  • CompositionEvent функция обработчика
  • DragEvent функция обработчика
  • FocusEvent функция обработчика
  • Event функция обработчика
  • InputEvent функция обработчика
  • KeyboardEvent функция обработчика
  • MouseEvent функция обработчика
  • PointerEvent функция обработчика
  • TouchEvent функция обработчика
  • TransitionEvent функция обработчика
  • UIEvent функция обработчика
  • WheelEvent функция обработчика
• Использование
  • Применение стилей CSS
  • Работа с узлом DOM с помощью ref
  • Опасное задание внутреннего HTML
  • Обработка событий мыши
  • Обработка событий указателя
  • Обработка событий фокуса
  • Обработка событий клавиатуры

Справочник

Общие компоненты (например, <div>)

<div className="wrapper">Some content</div>

См. дополнительные примеры ниже.

Свойства

Эти специальные свойства React поддерживаются для всех встроенных компонентов:

• children: Узел React (элемент, строка, число, портал, пустой узел, как null, undefined и булевы значения, или массив других узлов React). Указывает содержимое внутри компонента. При использовании JSX вы обычно указываете свойство children неявно, вложенные теги, как <div><span /></div>.

• dangerouslySetInnerHTML: Объект вида { __html: '<p>some html</p>' } со строкой исходного HTML внутри. Заменяет свойство innerHTML узла DOM и отображает переданный HTML внутри. Это следует использовать с большой осторожностью! Если HTML не является надёжным (например, если он основан на пользовательских данных), вы рискуете ввести уязвимость XSS. Узнайте больше об использовании dangerouslySetInnerHTML.

• ref: Объект ref из useRef или createRef, или функция обратного вызова ref, или строка для устаревшего ref. Ваш ref будет заполнен элементом DOM для этого узла. Узнайте больше о работе с DOM с помощью ref.

• suppressContentEditableWarning: Логическое значение. Если true, подавляет предупреждение, которое React показывает для элементов, которые имеют как children, так и contentEditable={true} (которые обычно не работают вместе). Используйте это, если вы создаете библиотеку текстового ввода, которая управляет содержимым contentEditable вручную.

• suppressHydrationWarning: Логическое значение. Если вы используете рендеринг на сервере, обычно появляется предупреждение, когда сервер и клиент рендерят разное содержимое. В некоторых редких случаях (например, со временем), гарантировать точное совпадение очень сложно или невозможно. Если вы установите suppressHydrationWarning в true, React не будет предупреждать вас о несовпадениях в атрибутах и содержании этого элемента. Он работает только на одном уровне вглубь и предназначен для использования как крайняя мера. Не злоупотребляйте этим. Узнайте о подавлении ошибок несоответствия гидратации.

• style: Объект со стилями CSS, например { fontWeight: 'bold', margin: 20 }. Аналогично свойству DOM style, имена свойств CSS должны быть написаны как camelCase, например, fontWeight вместо font-weight. Вы можете передавать строки или числа в качестве значений. Если вы передаёте число, как width: 100, React автоматически добавит px («пиксели») к значению, если это не безразмерное свойство. Рекомендуется использовать style только для динамических стилей, где значения стилей неизвестны заранее. В других случаях применение простых CSS-классов с className более эффективно. Узнайте больше о className и style.

Эти стандартные свойства DOM также поддерживаются для всех встроенных компонентов:

• accessKey: Строка. Указывает комбинацию клавиш для элемента. Обычно не рекомендуется.
• aria-*: Атрибуты ARIA позволяют задать информацию о дереве доступности для данного элемента. Смотрите атрибуты ARIA для полной справки. В React все имена атрибутов ARIA точно такие же, как и в HTML.
• autoCapitalize: Строка. Указывает, следует ли и как следует капитализировать пользовательский ввод.
• className: Строка. Задает имя класса CSS элемента. Подробнее о применении стилей CSS.
• contentEditable: Логическое значение. Если true, браузер позволяет пользователю напрямую редактировать рендер элемента. Это используется для реализации библиотек для работы с богатым текстом, таких как Lexical. React предупреждает, если вы пытаетесь передать дочерние элементы React элементу с contentEditable={true}, так как React не сможет обновить его содержимое после редактирования пользователем.
• data-*: Атрибуты данных позволяют прикрепить данные в виде строки к элементу, например, data-fruit="banana". В React они не часто используются, так как обычно данные считываются из свойств props или состояния.
• dir: Либо 'ltr', либо 'rtl'. Указывает направление текста элемента.
• draggable: Логическое значение. Указывает, может ли элемент быть перетащен. Часть API перетаскивания HTML.
• enterKeyHint: Строка. Указывает действие, которое должно отображаться для клавиши Enter на виртуальной клавиатуре.
• htmlFor: Строка. Для <label> и <output> позволяет связать метку с каким-либо элементом управления. То же самое, что и for атрибут HTML. React использует стандартные имена свойств DOM (htmlFor) вместо имен атрибутов HTML.
• hidden: Логическое значение или строка. Указывает, следует ли скрывать элемент.
• id: Строка. Задает уникальный идентификатор для этого элемента, который можно использовать для его последующего поиска или связи с другими элементами. Генерируйте его с помощью useId, чтобы избежать конфликтов между несколькими экземплярами одного и того же компонента.
• is: Строка. При указании компонент будет вести себя как пользовательский элемент.
• inputMode: Строка. Указывает, какой вид клавиатуры отобразить (например, текст, число или телефон).
• itemProp: Строка. Указывает, какую свойство представляет элемент для веб-бот-парсеров структурированных данных.
• lang: Строка. Указывает язык элемента.
• onAnimationEnd: Функция-обработчик AnimationEvent обработчика. Срабатывает при завершении анимации CSS.
• onAnimationEndCapture: Версия onAnimationEnd, которая срабатывает в фазе захвата.
• onAnimationIteration: Функция-обработчик AnimationEvent обработчика. Срабатывает при завершении итерации анимации CSS и начале новой.
• onAnimationIterationCapture: Версия onAnimationIteration, которая срабатывает в фазе захвата.
• onAnimationStart: Функция-обработчик AnimationEvent обработчика. Срабатывает при запуске анимации CSS.
• onAnimationStartCapture: onAnimationStart, но срабатывает в фазе захвата.
• onAuxClick: Функция-обработчик MouseEvent обработчика. Срабатывает при нажатии на дополнительную (не основную) кнопку указателя.
• onAuxClickCapture: Версия onAuxClick, которая срабатывает в фазе захвата.
• onBeforeInput: Функция-обработчик InputEvent обработчика. Срабатывает перед изменением значения редактируемого элемента. React пока не использует собственный beforeinput событие, а вместо этого пытается его реализовать с помощью других событий.
• onBeforeInputCapture: Версия onBeforeInput которая срабатывает в фазе захвата.
• onBlur: Функция-обработчик FocusEvent обработчика. Срабатывает, когда элемент потерял фокус. В отличие от встроенного браузерного события blur, в React событие onBlur всплывает.
• onBlurCapture: Версия onBlur которая срабатывает в фазе захвата.
• onClick: Функция-обработчик MouseEvent обработчика. Срабатывает при нажатии на основную кнопку устройства указания.
• onClickCapture: Версия onClick которая срабатывает в фазе захвата.
• onCompositionStart: Функция-обработчик CompositionEvent обработчика. Срабатывает, когда редактор ввода начинает новую сессию составления.
• onCompositionStartCapture: Версия onCompositionStart которая срабатывает в фазе захвата.
• onCompositionEnd: Функция-обработчик CompositionEvent обработчика. Срабатывает, когда редактор ввода завершает или отменяет сессию составления.
• onCompositionEndCapture: Версия onCompositionEnd которая срабатывает в фазе захвата.
• onCompositionUpdate: Функция-обработчик CompositionEvent обработчика. Срабатывает, когда редактор ввода получает новый символ.
• onCompositionUpdateCapture: Версия onCompositionUpdate которая срабатывает в фазе захвата.
• onContextMenu: Функция-обработчик MouseEvent обработчика. Срабатывает, когда пользователь пытается открыть контекстное меню.
• onContextMenuCapture: Версия onContextMenu которая срабатывает в фазе захвата.

• onCopy: A ClipboardEvent обработчик функции. Срабатывает, когда пользователь пытается скопировать что-то в буфер обмена.
• onCopyCapture: A version of onCopy that fires in the фазе захвата.
• onCut: A ClipboardEvent обработчик функции. Срабатывает, когда пользователь пытается вырезать что-то в буфер обмена.
• onCutCapture: A version of onCut that fires in the фазе захвата.
• onDoubleClick: A MouseEvent обработчик функции. Срабатывает, когда пользователь дважды щелкает. Соответствует событию браузера dblclick.
• onDoubleClickCapture: A version of onDoubleClick that fires in the фазе захвата.
• onDrag: A DragEvent обработчик функции. Срабатывает, пока пользователь перетаскивает что-то.
• onDragCapture: A version of onDrag that fires in the фазе захвата.
• onDragEnd: A DragEvent обработчик функции. Срабатывает, когда пользователь перестаёт перетаскивать что-то.
• onDragEndCapture: A version of onDragEnd that fires in the фазе захвата.
• onDragEnter: A DragEvent обработчик функции. Срабатывает, когда перетаскиваемое содержимое входит в целевой элемент.
• onDragEnterCapture: A version of onDragEnter that fires in the фазе захвата.
• onDragOver: A DragEvent обработчик функции. Срабатывает в целевом элементе, пока перетаскиваемое содержимое над ним. Вы должны вызвать e.preventDefault() здесь, чтобы разрешить поместить.
• onDragOverCapture: A version of onDragOver that fires in the фазе захвата.
• onDragStart: A DragEvent обработчик функции. Срабатывает, когда пользователь начинает перетаскивание элемента.
• onDragStartCapture: A version of onDragStart that fires in the фазе захвата.
• onDrop: A DragEvent обработчик функции. Срабатывает, когда что-то помещается в целевой элемент.
• onDropCapture: A version of onDrop that fires in the фазе захвата.
• onFocus: A FocusEvent обработчик функции. Срабатывает, когда элемент получает фокус. В отличие от встроенного браузерного события focus, в React событие onFocus поднимается вверх по дереву DOM.
• onFocusCapture: A version of onFocus that fires in the фазе захвата.
• onGotPointerCapture: A PointerEvent обработчик функции. Срабатывает, когда элемент программно захватывает указатель.
• onGotPointerCaptureCapture: A version of onGotPointerCapture that fires in the фазе захвата.
• onKeyDown: A KeyboardEvent обработчик функции. Срабатывает при нажатии клавиши.
• onKeyDownCapture: A version of onKeyDown that fires in the фазе захвата.
• onKeyPress: A KeyboardEvent обработчик функции. Устарело. Используйте onKeyDown или onBeforeInput вместо этого.
• onKeyPressCapture: A version of onKeyPress that fires in the фазе захвата.
• onKeyUp: A KeyboardEvent обработчик функции. Срабатывает при отпускании клавиши.
• onKeyUpCapture: A version of onKeyUp that fires in the фазе захвата.
• onLostPointerCapture: A PointerEvent обработчик функции. Срабатывает, когда элемент прекращает захват указателя.
• onLostPointerCaptureCapture: A version of onLostPointerCapture that fires in the фазе захвата.
• onMouseDown: A MouseEvent обработчик функции. Срабатывает, когда указатель нажат.
• onMouseDownCapture: A version of onMouseDown that fires in the фазе захвата.
• onMouseEnter: A MouseEvent обработчик функции. Срабатывает, когда указатель перемещается внутрь элемента. Не имеет фазы захвата. Вместо этого onMouseLeave и onMouseEnter распространяются от элемента, из которого выходят, к элементу, в который входят.
• onMouseLeave: A MouseEvent обработчик функции. Срабатывает, когда указатель перемещается за пределы элемента. Не имеет фазы захвата. Вместо этого onMouseLeave и onMouseEnter распространяются от элемента, из которого выходят, к элементу, в который входят.
• onMouseMove: A MouseEvent обработчик функции. Срабатывает, когда координаты указателя меняются.
• onMouseMoveCapture: A version of onMouseMove that fires in the фазе захвата.
• onMouseOut: A MouseEvent обработчик функции. Срабатывает, когда указатель перемещается за пределы элемента или в дочерний элемент.
• onMouseOutCapture: A version of onMouseOut that fires in the фазе захвата.
• onMouseUp: A MouseEvent обработчик функции. Срабатывает, когда указатель отпущен.
• onMouseUpCapture: A version of onMouseUp that fires in the фазе захвата.
• onPointerCancel: A PointerEvent обработчик функции. Срабатывает, когда браузер отменяет взаимодействие с указателем.
• onPointerCancelCapture: A version of onPointerCancel that fires in the фазе захвата.
• onPointerDown: A PointerEvent обработчик функции. Срабатывает, когда указатель активируется.
• onPointerDownCapture: A version of onPointerDown that fires in the фазе захвата.
• onPointerEnter: A PointerEvent обработчик функции. Срабатывает, когда указатель перемещается внутрь элемента. Не имеет фазы захвата. Вместо этого onPointerLeave и onPointerEnter распространяются от элемента, из которого выходят, к элементу, в который входят.
• onPointerLeave: A PointerEvent обработчик функции. Срабатывает, когда указатель перемещается за пределы элемента. Не имеет фазы захвата. Вместо этого onPointerLeave и onPointerEnter распространяются от элемента, из которого выходят, к элементу, в который входят.

• onPointerMove: Функция-обработчик PointerEvent. Срабатывает, когда указатель изменяет координаты.
• onPointerMoveCapture: Версия onPointerMove, срабатывающая на фазе захвата.
• onPointerOut: Функция-обработчик PointerEvent. Срабатывает, когда указатель выходит за пределы элемента, если взаимодействие с указателем отменено, и по некоторым другим причинам.
• onPointerOutCapture: Версия onPointerOut, срабатывающая на фазе захвата.
• onPointerUp: Функция-обработчик PointerEvent. Срабатывает, когда указатель больше не активен.
• onPointerUpCapture: Версия onPointerUp, срабатывающая на фазе захвата.
• onPaste: Функция-обработчик ClipboardEvent. Срабатывает, когда пользователь пытается вставить что-то из буфера обмена.
• onPasteCapture: Версия onPaste, срабатывающая на фазе захвата.
• onScroll: Функция-обработчик Event. Срабатывает, когда элемент прокручен. Это событие не поднимается вверх по дереву элементов.
• onScrollCapture: Версия onScroll, срабатывающая на фазе захвата.
• onSelect: Функция-обработчик Event. Срабатывает после изменения выделения внутри редактируемого элемента, например, input. React расширяет событие onSelect для работы с элементами contentEditable={true} также. Кроме того, React расширяет его для срабатывания при пустом выделении и при редактировании (что может повлиять на выделение).
• onSelectCapture: Версия onSelect, срабатывающая на фазе захвата.
• onTouchCancel: Функция-обработчик TouchEvent. Срабатывает, когда браузер отменяет взаимодействие с касанием.
• onTouchCancelCapture: Версия onTouchCancel, срабатывающая на фазе захвата.
• onTouchEnd: Функция-обработчик TouchEvent. Срабатывает, когда одна или несколько точек касания удаляются.
• onTouchEndCapture: Версия onTouchEnd, срабатывающая на фазе захвата.
• onTouchMove: Функция-обработчик TouchEvent. Срабатывает, когда одна или несколько точек касания перемещаются.
• onTouchMoveCapture: Версия onTouchMove, срабатывающая на фазе захвата.
• onTouchStart: Функция-обработчик TouchEvent. Срабатывает, когда одна или несколько точек касания размещаются.
• onTouchStartCapture: Версия onTouchStart, срабатывающая на фазе захвата.
• onTransitionEnd: Функция-обработчик TransitionEvent. Срабатывает, когда завершается CSS-анимация.
• onTransitionEndCapture: Версия onTransitionEnd, срабатывающая на фазе захвата.
• onWheel: Функция-обработчик WheelEvent. Срабатывает, когда пользователь вращает колесо мыши.
• onWheelCapture: Версия onWheel, срабатывающая на фазе захвата.
• role: Строка. Явно указывает роль элемента для вспомогательных технологий.
• slot: Строка. Указывает имя слота при использовании теневого DOM. В React, эквивалентный шаблон обычно достигается путём передачи JSX в качестве свойств, например <Layout left={<Sidebar />} right={<Content />} />.
• spellCheck: Булево значение или null. Если явно задано true или false, включает или выключает проверку правописания.
• tabIndex: Число. Переопределяет поведение клавиши Tab по умолчанию. Избегайте использования значений, отличных от -1 и 0.
• title: Строка. Указывает текст всплывающей подсказки для элемента.
• translate: Либо 'yes', либо 'no'. Передача 'no' исключает содержимое элемента из перевода.

Вы также можете передать пользовательские атрибуты в качестве свойств, например mycustomprop="someValue". Это может быть полезно при интеграции с сторонними библиотеками. Имя пользовательского атрибута должно быть в нижнем регистре и не должно начинаться с on. Значение будет преобразовано в строку. Если вы передадите null или undefined, пользовательский атрибут будет удалён.

Эти события срабатывают только для элементов <form>:

• onReset: Функция-обработчик Event. Срабатывает, когда форма сброшена.
• onResetCapture: Версия onReset, срабатывающая на фазе захвата.
• onSubmit: Функция-обработчик Event. Срабатывает, когда форма отправлена.
• onSubmitCapture: Версия onSubmit, срабатывающая на фазе захвата.

Эти события срабатывают только для элементов <dialog>. В отличие от событий браузера, они поднимаются вверх по дереву элементов в React:

• onCancel: Функция-обработчик Event. Срабатывает, когда пользователь пытается закрыть диалоговое окно.
• onCancelCapture: Версия onCancel, срабатывающая на фазе захвата.
• onClose: Функция-обработчик Event. Срабатывает, когда диалоговое окно закрыто.
• onCloseCapture: Версия onClose, срабатывающая на фазе захвата.

Эти события срабатывают только для элементов <details>. В отличие от событий браузера, они поднимаются вверх по дереву элементов в React:

• onToggle: Функция-обработчик Event. Срабатывает, когда пользователь переключает детали.
• onToggleCapture: Версия onToggle, срабатывающая на фазе захвата.

Эти события срабатывают для <img>, <iframe>, <object>, <embed>, <link> и SVG <image> элементов. В отличие от событий браузера, они всплывают в React:

• onLoad: Функция обработчика Event. Срабатывает при загрузке ресурса.
• onLoadCapture: Версия onLoad , которая срабатывает на фазе захвата в фазе захвата.
• onError: Функция обработчика Event. Срабатывает, когда ресурс не удалось загрузить.
• onErrorCapture: Версия onError , которая срабатывает на фазе захвата в фазе захвата.

Эти события срабатывают для ресурсов, таких как <audio> и <video>. В отличие от событий браузера, они всплывают в React:

• onAbort: Функция-обработчик Event. Срабатывает, когда ресурс не был полностью загружен, но не из-за ошибки.
• onAbortCapture: Вариант onAbort, срабатывающий в фазе захвата.
• onCanPlay: Функция-обработчик Event. Срабатывает, когда доступно достаточно данных для начала воспроизведения, но не достаточно для воспроизведения до конца без буферизации.
• onCanPlayCapture: Вариант onCanPlay , срабатывающий в фазе захвата.
• onCanPlayThrough: Функция-обработчик Event. Срабатывает, когда есть достаточно данных, чтобы, вероятно, начать воспроизведение без буферизации до конца.
• onCanPlayThroughCapture: Вариант onCanPlayThrough , срабатывающий в фазе захвата.
• onDurationChange: Функция-обработчик Event. Срабатывает, когда обновляется продолжительность медиа.
• onDurationChangeCapture: Вариант onDurationChange , срабатывающий в фазе захвата.
• onEmptied: Функция-обработчик Event. Срабатывает, когда медиа становится пустым.
• onEmptiedCapture: Вариант onEmptied , срабатывающий в фазе захвата.
• onEncrypted: Функция-обработчик Event. Срабатывает, когда браузер встречает зашифрованное медиа.
• onEncryptedCapture: Вариант onEncrypted , срабатывающий в фазе захвата.
• onEnded: Функция-обработчик Event. Срабатывает, когда воспроизведение останавливается, потому что больше нечего воспроизводить.
• onEndedCapture: Вариант onEnded , срабатывающий в фазе захвата.
• onError: Функция-обработчик Event. Срабатывает, когда ресурс не удалось загрузить.
• onErrorCapture: Вариант onError , срабатывающий в фазе захвата.
• onLoadedData: Функция-обработчик Event. Срабатывает, когда текущая кадр воспроизведения загружен.
• onLoadedDataCapture: Вариант onLoadedData , срабатывающий в фазе захвата.
• onLoadedMetadata: Функция-обработчик Event. Срабатывает, когда метаданные загружены.
• onLoadedMetadataCapture: Вариант onLoadedMetadata , срабатывающий в фазе захвата.
• onLoadStart: Функция-обработчик Event. Срабатывает, когда браузер начал загрузку ресурса.
• onLoadStartCapture: Вариант onLoadStart , срабатывающий в фазе захвата.
• onPause: Функция-обработчик Event. Срабатывает, когда воспроизведение было приостановлено.
• onPauseCapture: Вариант onPause , срабатывающий в фазе захвата.
• onPlay: Функция-обработчик Event. Срабатывает, когда воспроизведение больше не приостановлено.
• onPlayCapture: Вариант onPlay , срабатывающий в фазе захвата.
• onPlaying: Функция-обработчик Event. Срабатывает, когда воспроизведение начинается или возобновляется.
• onPlayingCapture: Вариант onPlaying , срабатывающий в фазе захвата.
• onProgress: Функция-обработчик Event. Срабатывает периодически во время загрузки ресурса.
• onProgressCapture: Вариант onProgress , срабатывающий в фазе захвата.
• onRateChange: Функция-обработчик Event. Срабатывает при изменении скорости воспроизведения.
• onRateChangeCapture: Вариант onRateChange , срабатывающий в фазе захвата.
• onResize: Функция-обработчик Event. Срабатывает при изменении размера видео.
• onResizeCapture: Вариант onResize , срабатывающий в фазе захвата.
• onSeeked: Функция-обработчик Event. Срабатывает по завершении операции поиска.
• onSeekedCapture: Вариант onSeeked , срабатывающий в фазе захвата.
• onSeeking: Функция-обработчик Event. Срабатывает при начале операции поиска.
• onSeekingCapture: Вариант onSeeking , срабатывающий в фазе захвата.
• onStalled: Функция-обработчик Event. Срабатывает, когда браузер ожидает данных, но загрузка не происходит.
• onStalledCapture: Вариант onStalled , срабатывающий в фазе захвата.
• onSuspend: Функция-обработчик Event. Срабатывает, когда загрузка ресурса приостановлена.
• onSuspendCapture: Вариант onSuspend , срабатывающий в фазе захвата.
• onTimeUpdate: Функция-обработчик Event. Срабатывает при обновлении текущего времени воспроизведения.
• onTimeUpdateCapture: Вариант onTimeUpdate , срабатывающий в фазе захвата.
• onVolumeChange: Функция-обработчик Event. Срабатывает, когда изменяется громкость.
• onVolumeChangeCapture: Вариант onVolumeChange , срабатывающий в фазе захвата.
• onWaiting: Функция-обработчик Event. Срабатывает, когда воспроизведение остановлено из-за временного отсутствия данных.
• onWaitingCapture: Вариант onWaiting , срабатывающий в фазе захвата.

Ограничения

• Вы не можете передать одновременно как children, так и dangerouslySetInnerHTML.
• Некоторые события (например, onAbort и onLoad) не распространяются в браузере, но распространяются в React.

ref функция обратного вызова

Вместо объекта ref (например, возвращаемого useRef), вы можете передать функцию атрибуту ref.

<div ref={(node) => console.log(node)} />

См. пример использования ref обратного вызова.

Когда узел <div> DOM добавляется на экран, React вызовет ваш ref обработчик с узлом DOM node в качестве аргумента. Когда этот узел <div> DOM удаляется, React вызовет ваш ref обработчик с null.

React также вызовет ваш ref обработчик всякий раз, когда вы передадите другой ref обработчик. В приведенном выше примере (node) => { ... } — это другая функция на каждом рендере. Когда ваш компонент перерисовывается, предыдущая функция будет вызвана с null в качестве аргумента, а следующая — с узлом DOM.

Параметры

• node: Узел DOM или null. React передаст вам узел DOM при подключении ссылки и null при отсоединении ссылки ref. Если вы не передаете ту же ссылку на функцию для ref обработчика на каждом рендере, обработчик будет временно отсоединён и повторно подключён во время каждого перерендеринга компонента.

<div ref={(node) => {
  console.log(node);

  return () => {
    console.log('Clean up', node)
  }
}}>

Объект события React

Обработчики событий вашего приложения получат объект события React. Иногда он также называется «синтетическое событие».

<button onClick={e => {
  console.log(e); // React event object
}} />

Он соответствует тому же стандарту, что и основанные события DOM, но исправляет некоторые несовместимости браузеров.

Некоторые события React не отображаются напрямую в родных событиях браузера. Например, в onMouseLeave, e.nativeEvent будет указывать на событие mouseout. Конкретное отображение не является частью публичного API и может измениться в будущем. Если вам по какой-то причине нужен родной объект события браузера, прочитайте его из e.nativeEvent.

Свойства

Объекты событий React реализуют некоторые стандартные Event свойства:

• bubbles: Логическое значение. Возвращает, поднимается ли событие по дереву DOM.
• cancelable: Логическое значение. Возвращает, может ли быть отменено событие.
• currentTarget: Узел DOM. Возвращает узел, к которому прикреплён текущий обработчик в дереве React.
• defaultPrevented: Логическое значение. Возвращает, вызывался ли preventDefault.
• eventPhase: Число. Возвращает фазу, в которой находится событие.
• isTrusted: Логическое значение. Возвращает, было ли событие инициировано пользователем.
• target: Узел DOM. Возвращает узел, на котором произошло событие (который может быть удалённым потомком).
• timeStamp: Число. Возвращает время, когда произошло событие.

Кроме того, объекты событий React предоставляют следующие свойства:

• nativeEvent: Объект DOM Event. Исходный объект события браузера.

Методы

Объекты событий React реализуют некоторые стандартные Event методы:

• preventDefault(): Предотвращает стандартное действие браузера для события.
• stopPropagation(): Останавливает распространение события по дереву React.

Кроме того, объекты событий React предоставляют следующие методы:

• isDefaultPrevented(): Возвращает логическое значение, указывающее, вызывался ли preventDefault.
• isPropagationStopped(): Возвращает логическое значение, указывающее, вызывался ли stopPropagation.
• persist(): Не используется с React DOM. В React Native вызовите этот метод для чтения свойств события после него.
• isPersistent(): Не используется с React DOM. В React Native возвращает, вызывался ли persist.

Примечания

• Значения currentTarget, eventPhase, target, и type отражают значения, ожидаемые вашим кодом React. Под капотом React прикрепляет обработчики событий в корне, но это не отражается в объектах событий React. Например, e.currentTarget может не совпадать с базовым e.nativeEvent.currentTarget. Для полифиллов e.type (тип события React) может отличаться от e.nativeEvent.type (базовый тип).

AnimationEvent функция обработчика

Тип обработчика событий для событий анимации CSS.

<div
  onAnimationStart={e => console.log('onAnimationStart')}
  onAnimationIteration={e => console.log('onAnimationIteration')}
  onAnimationEnd={e => console.log('onAnimationEnd')}
/>

Параметры

• e: Объект события React React event object со следующими дополнительными свойствами AnimationEvent:
  • animationName
  • elapsedTime
  • pseudoElement

ClipboardEvent функция обработчика

Тип обработчика событий для событий API буфера обмена.

<input
  onCopy={e => console.log('onCopy')}
  onCut={e => console.log('onCut')}
  onPaste={e => console.log('onPaste')}
/>

Параметры

• e: Объект события React React event object со следующими дополнительными свойствами ClipboardEvent:

  • clipboardData

CompositionEvent функция обработчика

Тип обработчика событий для событий редактора метода ввода (IME).

<input
  onCompositionStart={e => console.log('onCompositionStart')}
  onCompositionUpdate={e => console.log('onCompositionUpdate')}
  onCompositionEnd={e => console.log('onCompositionEnd')}
/>

Параметры

• e: Объект события React React event object со следующими дополнительными свойствами CompositionEvent:
  • data

DragEvent функция обработчика

Тип обработчика событий для событий API перетаскивания HTML.

<>
  <div
    draggable={true}
    onDragStart={e => console.log('onDragStart')}
    onDragEnd={e => console.log('onDragEnd')}
  >
    Drag source
  </div>

  <div
    onDragEnter={e => console.log('onDragEnter')}
    onDragLeave={e => console.log('onDragLeave')}
    onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
    onDrop={e => console.log('onDrop')}
  >
    Drop target
  </div>
</>

Параметры

• e: A React event object with these extra DragEvent properties:

  • dataTransfer

  It also includes the inherited MouseEvent properties:

  • altKey
  • button
  • buttons
  • ctrlKey
  • clientX
  • clientY
  • getModifierState(key)
  • metaKey
  • movementX
  • movementY
  • pageX
  • pageY
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

  It also includes the inherited UIEvent properties:

  • detail
  • view

FocusEvent обработчик события фокусировки

Тип обработчика событий фокусировки.

<input
  onFocus={e => console.log('onFocus')}
  onBlur={e => console.log('onBlur')}
/>

См. пример.

Параметры

• e: A React event object with these extra FocusEvent properties:

  • relatedTarget

  It also includes the inherited UIEvent properties:

  • detail
  • view

Event функция-обработчик

Тип обработчика событий общего назначения.

Параметры

• e: A React event object with no additional properties.

InputEvent функция-обработчик

Тип обработчика событий onBeforeInput.

<input onBeforeInput={e => console.log('onBeforeInput')} />

Параметры

• e: A React event object with these extra InputEvent properties:
  • data

KeyboardEvent функция-обработчик

Тип обработчика событий клавиатуры.

<input
  onKeyDown={e => console.log('onKeyDown')}
  onKeyUp={e => console.log('onKeyUp')}
/>

См. пример.

Параметры

• e: A React event object with these extra KeyboardEvent properties:

  • altKey
  • charCode
  • code
  • ctrlKey
  • getModifierState(key)
  • key
  • keyCode
  • locale
  • metaKey
  • location
  • repeat
  • shiftKey
  • which

  It also includes the inherited UIEvent properties:

  • detail
  • view

MouseEvent функция-обработчик

Тип обработчика событий мыши.

<div
  onClick={e => console.log('onClick')}
  onMouseEnter={e => console.log('onMouseEnter')}
  onMouseOver={e => console.log('onMouseOver')}
  onMouseDown={e => console.log('onMouseDown')}
  onMouseUp={e => console.log('onMouseUp')}
  onMouseLeave={e => console.log('onMouseLeave')}
/>

См. пример.

Параметры

• e: A React event object with these extra MouseEvent properties:

  • altKey
  • button
  • buttons
  • ctrlKey
  • clientX
  • clientY
  • getModifierState(key)
  • metaKey
  • movementX
  • movementY
  • pageX
  • pageY
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

  It also includes the inherited UIEvent properties:

  • detail
  • view

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

Тип обработчика событий для событий указателя.

<div
  onPointerEnter={e => console.log('onPointerEnter')}
  onPointerMove={e => console.log('onPointerMove')}
  onPointerDown={e => console.log('onPointerDown')}
  onPointerUp={e => console.log('onPointerUp')}
  onPointerLeave={e => console.log('onPointerLeave')}
/>

См. пример.

Параметры

• e: A React event object with these extra PointerEvent properties:

  • height
  • isPrimary
  • pointerId
  • pointerType
  • pressure
  • tangentialPressure
  • tiltX
  • tiltY
  • twist
  • width

  It also includes the inherited MouseEvent properties:

  • altKey
  • button
  • buttons
  • ctrlKey
  • clientX
  • clientY
  • getModifierState(key)
  • metaKey
  • movementX
  • movementY
  • pageX
  • pageY
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

  It also includes the inherited UIEvent properties:

  • detail
  • view

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

Тип обработчика событий для событий касания.

<div
  onTouchStart={e => console.log('onTouchStart')}
  onTouchMove={e => console.log('onTouchMove')}
  onTouchEnd={e => console.log('onTouchEnd')}
  onTouchCancel={e => console.log('onTouchCancel')}
/>

Параметры

• e: A React event object with these extra TouchEvent properties:

  • altKey
  • ctrlKey
  • changedTouches
  • getModifierState(key)
  • metaKey
  • shiftKey
  • touches
  • targetTouches

  It also includes the inherited UIEvent properties:

  • detail
  • view

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

Тип обработчика событий для событий перехода CSS.

<div
  onTransitionEnd={e => console.log('onTransitionEnd')}
/>

Параметры

• e: A объект события React с дополнительными TransitionEvent свойствами:
  • elapsedTime
  • propertyName
  • pseudoElement

UIEvent функция-обработчик событий

Тип обработчика событий для общих событий пользовательского интерфейса.

<div
  onScroll={e => console.log('onScroll')}
/>

Параметры

• e: A объект события React с дополнительными UIEvent свойствами:
  • detail
  • view

WheelEvent функция-обработчик событий

Обработчик событий для события onWheel.

<div
  onWheel={e => console.log('onWheel')}
/>

Параметры

• e: A объект события React с дополнительными WheelEvent свойствами:

  • deltaMode
  • deltaX
  • deltaY
  • deltaZ

  Также содержит наследуемые MouseEvent свойства:

  • altKey
  • button
  • buttons
  • ctrlKey
  • clientX
  • clientY
  • getModifierState(key)
  • metaKey
  • movementX
  • movementY
  • pageX
  • pageY
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

  Также содержит наследуемые UIEvent свойства:

  • detail
  • view

Использование

Применение стилей CSS

В React вы указываете класс CSS с помощью className. Он работает как атрибут class в HTML:

<img className="avatar" />

Затем вы пишете правила CSS для него в отдельном файле CSS:

/* In your CSS */
.avatar {
  border-radius: 50%;
}

React не предписывает, как добавлять файлы CSS. В простейшем случае, вы добавите тег <link> в ваш HTML. Если вы используете инструмент сборки или фреймворк, проконсультируйтесь с его документацией, чтобы узнать, как добавить файл CSS в свой проект.

Иногда значения стилей зависят от данных. Используйте атрибут style для динамической передачи стилей:

<img
  className="avatar"
  style={{
    width: user.imageSize,
    height: user.imageSize
  }}
/>

В приведенном выше примере style={{}} не является специальным синтаксисом, а обычным объектом {} внутри style={ } JSX фигурных скобок. Рекомендуется использовать атрибут style только в том случае, когда ваши стили зависят от переменных JavaScript.

export default function Avatar({ user }) {
  return (
    <img
      src={user.imageUrl}
      alt={'Photo of ' + user.name}
      className="avatar"
      style={{
        width: user.imageSize,
        height: user.imageSize
      }}
    />
  );
}

import cn from 'classnames';

function Row({ isSelected }) {
  return (
    <div className={cn('row', isSelected && 'selected')}>
      ...
    </div>
  );
}

import cn from 'classnames';

function Row({ isSelected, size }) {
  return (
    <div className={cn('row', {
      selected: isSelected,
      large: size === 'large',
      small: size === 'small',
    })}>
      ...
    </div>
  );
}

Работа с узлом DOM с помощью ref

Иногда вам нужно получить узел DOM браузера, связанный с тегом в JSX. Например, если вы хотите сфокусировать <input> при нажатии на кнопку, вам нужно вызвать focus() на узле DOM браузера <input>.

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

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);
  // ...
  return (
    <input ref={inputRef} />
    // ...

React поместит узел DOM в inputRef.current после его отображения на экране.

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

Подробнее о работе с DOM с помощью refs и более подробных примерах.

Для более сложных случаев, атрибут ref также принимает функцию-обработчик

const markup = { __html: '<p>some raw html</p>' };
return <div dangerouslySetInnerHTML={markup} />;

Опасное задание внутреннего HTML

Вы можете передать строку с исходным HTML элементу следующим образом:

const markup = { __html: '<p>some raw html</p>' };
return <div dangerouslySetInnerHTML={markup} />;

Это опасно. Как и с базовым свойством DOM innerHTML, вы должны проявлять крайнюю осторожность! Если разметка получена из ненадежного источника, очень просто ввести уязвимость XSS таким образом.

Например, если вы используете библиотеку Markdown, которая преобразует Markdown в HTML, доверяете, что её парсер не содержит ошибок, а пользователь видит только свой ввод, вы можете отобразить полученный HTML следующим образом:

import { Remarkable } from 'remarkable';

const md = new Remarkable();

function renderMarkdownToHTML(markdown) {
  // This is ONLY safe because the output HTML
  // is shown to the same user, and because you
  // trust this Markdown parser to not have bugs.
  const renderedHTML = md.render(markdown);
  return {__html: renderedHTML};
}

export default function MarkdownPreview({ markdown }) {
  const markup = renderMarkdownToHTML(markdown);
  return <div dangerouslySetInnerHTML={markup} />;
}

Объект {__html} должен быть создан как можно ближе к месту генерации HTML, как показано в примере в функции renderMarkdownToHTML. Это гарантирует, что весь исходный HTML, используемый в вашем коде, явно помечен как таковой, и что передаются только переменные, которые, как ожидается, содержат HTML. Не рекомендуется создавать объект inline, как в <div dangerouslySetInnerHTML={{__html: markup}} />.

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

const post = {
  // Imagine this content is stored in the database.
  content: `<img src="" onerror='alert("you were hacked")'>`
};

export default function MarkdownPreview() {
  // 🔴 SECURITY HOLE: passing untrusted input to dangerouslySetInnerHTML
  const markup = { __html: post.content };
  return <div dangerouslySetInnerHTML={markup} />;
}

Вставленный в HTML код будет выполняться. Хакер может использовать эту брешь в безопасности, чтобы украсть информацию пользователя или выполнить действия от его имени. Используйте dangerouslySetInnerHTML только с надёжными и проверенными данными.

Обработка событий мыши

Этот пример демонстрирует некоторые распространенные события мыши и когда они срабатывают.

export default function MouseExample() {
  return (
    <div
      onMouseEnter={e => console.log('onMouseEnter (parent)')}
      onMouseLeave={e => console.log('onMouseLeave (parent)')}
    >
      <button
        onClick={e => console.log('onClick (first button)')}
        onMouseDown={e => console.log('onMouseDown (first button)')}
        onMouseEnter={e => console.log('onMouseEnter (first button)')}
        onMouseLeave={e => console.log('onMouseLeave (first button)')}
        onMouseOver={e => console.log('onMouseOver (first button)')}
        onMouseUp={e => console.log('onMouseUp (first button)')}
      >
        First button
      </button>
      <button
        onClick={e => console.log('onClick (second button)')}
        onMouseDown={e => console.log('onMouseDown (second button)')}
        onMouseEnter={e => console.log('onMouseEnter (second button)')}
        onMouseLeave={e => console.log('onMouseLeave (second button)')}
        onMouseOver={e => console.log('onMouseOver (second button)')}
        onMouseUp={e => console.log('onMouseUp (second button)')}
      >
        Second button
      </button>
    </div>
  );
}

Обработка событий указателя

Этот пример демонстрирует некоторые распространённые события указателя и когда они срабатывают.

export default function PointerExample() {
  return (
    <div
      onPointerEnter={e => console.log('onPointerEnter (parent)')}
      onPointerLeave={e => console.log('onPointerLeave (parent)')}
      style={{ padding: 20, backgroundColor: '#ddd' }}
    >
      <div
        onPointerDown={e => console.log('onPointerDown (first child)')}
        onPointerEnter={e => console.log('onPointerEnter (first child)')}
        onPointerLeave={e => console.log('onPointerLeave (first child)')}
        onPointerMove={e => console.log('onPointerMove (first child)')}
        onPointerUp={e => console.log('onPointerUp (first child)')}
        style={{ padding: 20, backgroundColor: 'lightyellow' }}
      >
        First child
      </div>
      <div
        onPointerDown={e => console.log('onPointerDown (second child)')}
        onPointerEnter={e => console.log('onPointerEnter (second child)')}
        onPointerLeave={e => console.log('onPointerLeave (second child)')}
        onPointerMove={e => console.log('onPointerMove (second child)')}
        onPointerUp={e => console.log('onPointerUp (second child)')}
        style={{ padding: 20, backgroundColor: 'lightblue' }}
      >
        Second child
      </div>
    </div>
  );
}

Обработка событий фокуса

В React события фокуса события фокуса распространяются. Вы можете использовать currentTarget и relatedTarget для различения, возникли ли события фокусировки или разфокусировки извне родительского элемента. Пример показывает, как обнаружить фокусировку дочернего элемента, фокусировку родительского элемента и как обнаружить вход или выход фокуса во всем поддереве.

export default function FocusExample() {
  return (
    <div
      tabIndex={1}
      onFocus={(e) => {
        if (e.currentTarget === e.target) {
          console.log('focused parent');
        } else {
          console.log('focused child', e.target.name);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // Not triggered when swapping focus between children
          console.log('focus entered parent');
        }
      }}
      onBlur={(e) => {
        if (e.currentTarget === e.target) {
          console.log('unfocused parent');
        } else {
          console.log('unfocused child', e.target.name);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // Not triggered when swapping focus between children
          console.log('focus left parent');
        }
      }}
    >
      <label>
        First name:
        <input name="firstName" />
      </label>
      <label>
        Last name:
        <input name="lastName" />
      </label>
    </div>
  );
}

Обработка событий клавиатуры

Этот пример демонстрирует некоторые распространённые события клавиатуры и когда они срабатывают.

export default function KeyboardExample() {
  return (
    <label>
      First name:
      <input
        name="firstName"
        onKeyDown={e => console.log('onKeyDown:', e.key, e.code)}
        onKeyUp={e => console.log('onKeyUp:', e.key, e.code)}
      />
    </label>
  );
}