Общие компоненты¶

Все встроенные компоненты браузера, такие как <div>, поддерживают некоторые общие пропсы и события.

Описание¶

Общий компонент¶

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

Свойства

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

children: Узел React (элемент, строка, число, портал, пустой узел типа null, undefined и booleans, или массив других узлов React). Определяет содержимое внутри компонента. Когда вы используете JSX, вы обычно неявно указываете пропс children путем вложения тегов типа <div><span /></div>.
dangerouslySetInnerHTML: Объект вида { __html: '<p>some html</p>' } с необработанной HTML-строкой внутри. Переопределяет свойство innerHTML узла DOM и отображает переданный HTML внутри. Это следует использовать с особой осторожностью! Если HTML внутри не является доверенным (например, если он основан на данных пользователя), вы рискуете получить XSS уязвимость.
ref: Объект ссылки из useRef или createRef, или функция обратного вызова ref, или строка для legacy refs. Ваш ref будет заполнен элементом DOM для этого узла.
suppressContentEditableWarning: Булево значение. Если true, подавляет предупреждение, которое React показывает для элементов, имеющих одновременно children и contentEditable={true} (которые обычно не работают вместе). Используйте это, если вы создаете библиотеку ввода текста, которая управляет содержимым contentEditable вручную.
suppressHydrationWarning: Булево значение. Если вы используете серверный рендеринг,, обычно появляется предупреждение, когда сервер и клиент рендерят разное содержимое. В некоторых редких случаях (например, временные метки) очень трудно или невозможно гарантировать точное совпадение. Если вы установите uppressHydrationWarning в true, React не будет предупреждать вас о несоответствии атрибутов и содержимого этого элемента. Эта функция работает только на одном уровне и предназначена для использования в качестве аварийного люка. Не злоупотребляйте им. Читайте о подавлении ошибок гидратации.
style: Объект со стилями CSS, например { fontWeight: 'bold', margin: 20 }. Аналогично свойству DOM style, имена свойств CSS должны быть написаны в camelCase, например fontWeight вместо font-weight. В качестве значений можно передавать строки или числа. Если вы передаете число, например width: 100, React автоматически добавит px ("пиксели") к значению, если только это не свойство без единиц измерения. Мы рекомендуем использовать style только для динамических стилей, значения которых заранее не известны. В других случаях применение простых CSS-классов с className более эффективно.

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

accessKey: Строка. Указывает комбинацию клавиш для элемента. Обычно не рекомендуется.
aria-*: Атрибуты ARIA позволяют указать информацию дерева доступности для этого элемента. Полное руководство см. в Атрибуты ARIA. В React все имена атрибутов ARIA точно такие же, как и в HTML.
autoCapitalize: Строка. Определяет, должен ли пользовательский ввод набираться заглавными буквами и каким образом.
className: Строка. Указывает имя CSS-класса элемента.
contentEditable: Булево значение. Если true, браузер позволяет пользователю редактировать отображаемый элемент напрямую. Это используется для реализации библиотек богатого текстового ввода, таких как Lexical. React предупреждает, если вы пытаетесь передать дочерние элементы React элементу с contentEditable={true}, потому что React не сможет обновить его содержимое после редактирования пользователем.
data-*: Атрибуты Data позволяют прикрепить к элементу строковые данные, например, data-fruit="banana". В React они не часто используются, потому что обычно вместо этого вы считываете данные из props или state.
dir: Либо 'ltr', либо 'rtl'. Указывает направление текста элемента.
draggable: Булево значение. Определяет, является ли элемент перетаскиваемым. Часть HTML Drag and Drop API.
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: Функция обработчика ClipboardEvent. Срабатывает, когда пользователь пытается скопировать что-либо в буфер обмена.
onCopyCapture: Версия onCopy, которая срабатывает в фазе захвата.
onCut: Функция обработчика ClipboardEvent. Срабатывает, когда пользователь пытается вырезать что-то в буфере обмена.
onCutCapture: Версия onCut, которая срабатывает в фазе захвата.
onDoubleClick: Функция обработчика MouseEvent. Срабатывает, когда пользователь дважды щелкает мышью. Соответствует событию браузера dblclick.
onDoubleClickCapture: Версия onDoubleClick, которая срабатывает в фазе захвата.
onDrag: Функция обработчика DragEvent. Срабатывает, когда пользователь что-то перетаскивает.
onDragCapture: Версия функции onDrag, которая срабатывает в фазе захвата.
onDragEnd: Функция обработчика DragEvent. Срабатывает, когда пользователь прекращает перетаскивать что-то.
onDragEndCapture: Версия функции onDragEnd, которая срабатывает в фазе захвата.
onDragEnter: Функция обработчика DragEvent. Срабатывает, когда перетаскиваемое содержимое попадает в допустимую цель падения.
onDragEnterCapture: Версия функции onDragEnter, которая срабатывает в фазе захвата.
onDragOver: Функция обработчика DragEvent. Срабатывает на действительной цели падения, когда перетаскиваемое содержимое перетаскивается на нее. Вы должны вызвать e.preventDefault() здесь, чтобы разрешить перетаскивание.
onDragOverCapture: Версия onDragOver, которая срабатывает в фазе захвата.
onDragStart: Функция обработчика DragEvent. Срабатывает, когда пользователь начинает перетаскивать элемент.
onDragStartCapture: Версия onDragStart, которая срабатывает в фазе захвата.
onDrop: Функция обработчика DragEvent. Срабатывает, когда что-то падает на допустимую цель падения.
onDropCapture: Версия onDrop, которая срабатывает в фазе захвата.
onFocus: Функция обработчика FocusEvent. Срабатывает, когда элемент потерял фокус. В отличие от встроенного события браузера focus, в React событие onFocus пузырится.
onFocusCapture: Версия onFocus, которая срабатывает в фазе захвата
onGotPointerCapture: Функция обработчика PointerEvent. Срабатывает, когда элемент программно захватывает указатель.
onGotPointerCaptureCapture: Версия onGotPointerCapture, которая срабатывает в фазе захвата.
onKeyDown: Функция обработчика KeyboardEvent. Срабатывает при нажатии клавиши.
onKeyDownCapture: Версия функции onKeyDown, которая срабатывает в фазе захвата.
onKeyPress: Функция обработчика KeyboardEvent. Исправлено. Вместо нее используйте onKeyDown или onBeforeInput.
onKeyPressCapture: Версия onKeyPress, которая срабатывает в фазе захвата.
onKeyUp: Функция обработчика KeyboardEvent. Срабатывает при отпускании клавиши.
onKeyUpCapture: Версия функции onKeyUp, которая срабатывает в фазе захвата.
onLostPointerCapture: Функция обработчика PointerEvent. Срабатывает, когда элемент перестает захватывать указатель.
onLostPointerCaptureCapture: Версия onLostPointerCapture, которая срабатывает в фазе захвата.
onMouseDown: Функция обработчика MouseEvent. Срабатывает при нажатии указателя вниз.
onMouseDownCapture: Версия onMouseDown, которая срабатывает в фазе захвата.
onMouseEnter: Функция обработчика MouseEvent. Срабатывает, когда указатель перемещается внутри элемента. Не имеет фазы захвата. Вместо этого onMouseLeave и onMouseEnter распространяются от покидаемого элемента к вводимому.
onMouseLeave: Функция обработчика MouseEvent. Срабатывает, когда указатель перемещается за пределы элемента. Не имеет фазы захвата. Вместо этого onMouseLeave и onMouseEnter распространяются от покидаемого элемента к вводимому.
onMouseMove: Функция обработчика MouseEvent. Срабатывает при изменении координат указателя.
onMouseMoveCapture: Версия функции onMouseMove, которая срабатывает в фазе захвата.
onMouseOut: Функция обработчика MouseEvent. Срабатывает, когда указатель перемещается за пределы элемента, или если он перемещается в дочерний элемент.
onMouseOutCapture: Версия функции onMouseOut, которая срабатывает в фазе захвата.
onMouseUp: Функция обработчика MouseEvent. Срабатывает при освобождении указателя.
onMouseUpCapture: Версия функции onMouseUp, которая срабатывает в фазе захвата.
onPointerCancel: Функция обработчика PointerEvent. Срабатывает, когда браузер отменяет взаимодействие с указателем.
onPointerCancelCapture: Версия onPointerCancel, которая срабатывает в фазе захвата.
onPointerDown: Функция обработчика PointerEvent. Срабатывает, когда указатель становится активным.
onPointerDownCapture: Версия onPointerDown, которая срабатывает в фазе захвата.
onPointerEnter: Функция обработчика PointerEvent. Срабатывает, когда указатель перемещается внутри элемента. Не имеет фазы захвата. Вместо этого onPointerLeave и onPointerEnter распространяются от покидаемого элемента к вводимому.
onPointerLeave: Функция обработчика 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. Срабатывает после изменения выбора внутри редактируемого элемента, например, ввода. 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, которая срабатывает в фазе захвата
роль: Строка. Определяет роль элемента в явном виде для вспомогательных технологий.
slot: Строка. Указывает имя слота при использовании теневого DOM. В React эквивалентная схема обычно достигается путем передачи JSX в качестве props, например <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, которая срабатывает в фазе захвата.
Срабатывает при загрузке метаданных.
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.

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

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

Параметры

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

Возвращает

Не возвращает ничего из обратного вызова ref.

Объект события 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 animation.

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

Параметры

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

`ClipboardEvent`¶

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

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

Параметры

e: объект события React с этими дополнительными свойствами ClipboardEvent:
- clipboardData

`CompositionEvent`¶

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

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

Параметры

e: объект события React с этими дополнительными свойствами CompositionEvent:
- data

`DragEvent`¶

Тип обработчика событий для событий HTML Drag and Drop API.

<>
    <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: React event object с этими дополнительными свойствами DragEvent:
- dataTransfer
Он также включает унаследованные свойства MouseEvent:
- altKey
- button
- buttons
- ctrlKey
- clientX
- clientY
- getModifierState(key)
- metaKey
- movementX
- movementY
- pageX
- pageY
- relatedTarget
- screenX
- screenY
- shiftKey
Он также включает унаследованные свойства UIEvent:
- detail
- view

`FocusEvent`¶

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

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

Параметры

e: объект события React с этими дополнительными свойствами FocusEvent:
- relatedTarget
Он также включает унаследованные свойства UIEvent:
- detail
- view

`Event`¶

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

Параметры

e: объект события React без дополнительных свойств.

`InputEvent`¶

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

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

Параметры

e: объект события React с этими дополнительными свойствами InputEvent:
- data

`KeyboardEvent`¶

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

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

Параметры

e: объект события React с этими дополнительными свойствами KeyboardEvent:
- altKey
- charCode
- code
- ctrlKey
- getModifierState(key)
- key
- keyCode
- locale
- metaKey
- location
- repeat
- shiftKey
- which
Он также включает унаследованные свойства UIEvent:
- 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: объект события React с этими дополнительными свойствами MouseEvent:
- altKey
- button
- buttons
- ctrlKey
- clientX
- clientY
- getModifierState(key)
- metaKey
- movementX
- movementY
- pageX
- pageY
- relatedTarget
- screenX
- screenY
- shiftKey
Он также включает унаследованные свойства UIEvent:
- 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: Объект React event object с этими дополнительными свойствами PointerEvent:
- height
- isPrimary
- pointerId
- pointerType
- pressure
- tangentialPressure
- tiltX
- tiltY
- twist
- width
Он также включает унаследованные свойства MouseEvent:
- altKey
- button
- buttons
- ctrlKey
- clientX
- clientY
- getModifierState(key)
- metaKey
- movementX
- movementY
- pageX
- pageY
- relatedTarget
- screenX
- screenY
- shiftKey
Он также включает унаследованные свойства UIEvent:
- 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: объект события React с этими дополнительными свойствами TouchEvent:
Он также включает унаследованные свойства UIEvent:
- detail
- view

`TransitionEvent`¶

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

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

Параметры

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

`UIEvent`¶

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

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

Параметры

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

`WheelEvent`¶

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

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

Параметры

e: React event object с этими дополнительными свойствами WheelEvent:
Он также включает унаследованные свойства 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.

App.jsAvatar.jsCodeSandbox

import Avatar from './Avatar.js';

const user = {
    name: 'Hedy Lamarr',
    imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
    imageSize: 90,
};

export default function App() {
    return <Avatar user={user} />;
}

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

Как применить несколько классов CSS условно?

Чтобы применить классы CSS условно, вам нужно создать строку className самостоятельно с помощью JavaScript.

Например, className={'row ' + (isSelected ? 'selected': '')} создаст либо className="row", либо className="row selected" в зависимости от того, является ли isSelected true.

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

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 с помощью ссылки¶

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

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

import { useRef } from 'react';

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

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

App.jsCodeSandbox

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 с помощью ссылок и посмотрите больше примеров.

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

Опасная установка внутреннего HTML¶

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

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

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

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

App.jsMarkdownPreview.jsCodeSandbox

import { useState } from 'react';
import MarkdownPreview from './MarkdownPreview.js';

export default function MarkdownEditor() {
    const [postContent, setPostContent] = useState(
        '_Hello,_ **Markdown**!'
    );
    return (
        <>
            <label>
                Enter some markdown:
                <textarea
                    value={postContent}
                    onChange={(e) =>
                        setPostContent(e.target.value)
                    }
                />
            </label>
            <hr />
            <MarkdownPreview markdown={postContent} />
        </>
    );
}

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 опасен, замените приведенный выше код на следующий:

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 только с доверенными и проверенными данными.

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

Этот пример показывает некоторые общие события мыши и время их возникновения.

App.jsCodeSandbox

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>
    );
}

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

Этот пример показывает некоторые общие события pointer-events и время их возникновения.

App.jsCodeSandbox

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, focus events пузырьковый. Вы можете использовать currentTarget и relatedTarget, чтобы отличить, если события фокусировки или размытия возникли вне родительского элемента. Пример показывает, как обнаружить фокусировку дочернего элемента, фокусировку родительского элемента, а также как обнаружить вхождение или выход фокуса из всего поддерева.

App.jsCodeSandbox

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>
    );
}

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

Этот пример показывает некоторые общие клавиатурные события и время их возникновения.

App.jsCodeSandbox

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>
    );
}

Источник — https://react.dev/reference/react-dom/components/common

Общие компоненты¶

Описание¶

Общий компонент¶

ref функция¶

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

AnimationEvent¶

ClipboardEvent¶

CompositionEvent¶

DragEvent¶

FocusEvent¶

Event¶

InputEvent¶

KeyboardEvent¶

MouseEvent¶

PointerEvent¶

TouchEvent¶

TransitionEvent¶

UIEvent¶

WheelEvent¶

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

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

Манипулирование узлом DOM с помощью ссылки¶

Опасная установка внутреннего HTML¶

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

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

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

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

Комментарии

`ref` функция¶

`AnimationEvent`¶

`ClipboardEvent`¶

`CompositionEvent`¶

`DragEvent`¶

`FocusEvent`¶

`Event`¶

`InputEvent`¶

`KeyboardEvent`¶

`MouseEvent`¶

`PointerEvent`¶

`TouchEvent`¶

`TransitionEvent`¶

`UIEvent`¶

`WheelEvent`¶