Всі вбудовані компоненти браузера, такі як <div>, підтримують деякі поширені пропси та події.
Довідник
Загальні компоненти (наприклад, <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 буде заповнено елементом DOM для цього вузла. Детальніше про маніпуляції з DOM за допомогою рефів.
suppressContentEditableWarning: Логічний вираз. Якщо true, пригнічує попередження, яке React показує для елементів, що мають children і contentEditable={true} (які зазвичай не працюють разом). Використовуйте його, якщо ви збираєте бібліотеку текстового введення, яка керує вмістом contentEditable вручну.
suppressHydrationWarning: Логічний вираз. Якщо ви використовуєте серверний рендеринг, зазвичай з'являється попередження, коли сервер і клієнт рендерять різний вміст. У деяких рідкісних випадках (наприклад, мітки часу) гарантувати точну відповідність дуже важко або неможливо. Якщо ви встановите для suppressHydrationWarning значення true, React не буде попереджати вас про невідповідності в атрибутах і вмісті цього елемента. Він працює лише на один рівень вглиб і призначений для використання як аварійний люк. Не зловживайте ним. Почитайте про придушення помилок гідратації.
стиль: Об'єкт зі стилями CSS, наприклад { fontWeight: 'bold', margin: 20 }. Подібно до властивості DOM style, назви властивостей CSS слід записувати як camelCase, наприклад fontWeight замість font-weight. Ви можете передавати рядки або числа як значення. Якщо ви передаєте число, наприклад width: 100, React автоматично додасть px ("пікселі") до значення, якщо це не властивість unitless. Ми рекомендуємо використовувати style тільки для динамічних стилів, де ви не знаєте значення стилю наперед. В інших випадках ефективнішим буде застосування звичайних класів CSS з className. Детальніше про className та стиль.
Ці стандартні 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 вони не дуже часто використовуються, оскільки ви зазвичай читаєте дані з пропсів або стану.dir: Або 'ltr' або 'rtl'. Вказує напрямок тексту елемента.draggable: Булеве значення. Визначає, чи можна перетягувати елемент. Частина HTML Drag and Drop API.enterKeyHint: Рядок. Вказує, яку дію призначити для клавіші вводу на віртуальних клавіатурах.htmlFor: Рядок. Для <label> та <output> дозволяє пов'язати мітку з деяким елементом керування. Те саме, що і для атрибута 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 bubbles.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 event.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 bubbles.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, яка спрацьовує у фазі захоплення.role: Рядок. Вказує роль елемента явно для допоміжних технологій.slot: Рядок. Вказує ім'я слоту при використанні тіньового DOM. У React еквівалентний шаблон зазвичай досягається передачею JSX в якості пропсів, наприклад, <Layout left={<Sidebar />} right={<Content />} />.spellCheck: Логічне значення або нуль. Якщо явно встановлено у true або false, вмикає або вимикає перевірку правопису.tabIndex: Число. Перевизначає поведінку кнопки Tab за замовчуванням. Уникати використання значень, відмінних від -1 і 0.title: Рядок. Вказує текст підказки для елемента. перекласти : Або '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, яка спрацьовує у фазі захоплення.
Застереження
- Неможливо передати одночасно
дітям та dangerouslySetInnerHTML.
- Деякі події (наприклад,
onAbort та onLoad) не відображаються у браузері, але відображаються у React.
посилання на функцію зворотного виклику
Замість об'єкта ref (як той, що повертається useRef) ви можете передати функцію до атрибуту ref.
<div ref={(node) => console.log(node)} />
Дивіться приклад використання refcallback.
Коли DOM-вузол <div> буде додано на екран, React викличе ваш зворотній виклик ref з DOM-вузлом node як аргумент. Коли цей вузол <div> DOM буде видалено, React викличе ваш зворотній виклик ref з null.
React також викликатиме ваш зворотний виклик ref щоразу, коли ви передаєте зворотний виклик different ref. У наведеному вище прикладі (node) => { ... } - це інша функція для кожного рендерингу. При повторному рендерингу вашого компонента функція previous буде викликана з null в якості аргументу, а функція next буде викликана з вузлом DOM.
Параметри
вузол: Вузол 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: A DOM Event. Оригінальний об'єкт події браузера.
Методи
Об'єкти подій React реалізують деякі стандартні Event методи:
Додатково, об'єкти подій 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')}
/>
Параметр
ClipboardEvent функція-обробник
Тип обробника подій для подій Clipboard API.
<input
onCopy={e => console.log('onCopy')}
onCut={e => console.log('onCut')}
onPaste={e => console.log('onPaste')}
/>
Параметри
CompositionEvent функція-обробник
Тип обробника подій для подій редактора методів вводу (IME).
<input
onCompositionStart={e => console.log('onCompositionStart')}
onCompositionUpdate={e => console.log('onCompositionUpdate')}
onCompositionEnd={e => console.log('onCompositionEnd')}
/>
Параметри
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 з такими додатковими DragEvent властивостями:
Він також включає успадковані MouseEvent властивості:
Він також включає успадковані UIEvent властивості:
FocusEvent функція-обробник
Тип обробника подій для подій фокусу.
<input
onFocus={e => console.log('onFocus')}
onBlur={e => console.log('onBlur')}
/>
Дивіться приклад.
Параметри
Event функція-обробник
Тип обробника подій для типових подій.
Параметри
e: Об'єкт події React без додаткових властивостей.
Тип обробника події для події onBeforeInput.
<input onBeforeInput={e => console.log('onBeforeInput')} />
KeyboardEvent функція-обробник
Тип обробника подій для подій клавіатури.
<input
onKeyDown={e => console.log('onKeyDown')}
onKeyUp={e => console.log('onKeyUp')}
/>
Дивіться приклад.
Параметри
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')}
/>
Дивіться приклад.
Параметри
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 з такими додатковими PointerEvent властивостями:
Він також включає успадковані MouseEvent властивості:
Він також включає успадковані UIEvent властивості:
TouchEvent функція-обробник
Тип обробника подій для подій дотику.
<div
onTouchStart={e => console.log('onTouchStart')}
onTouchMove={e => console.log('onTouchMove')}
onTouchEnd={e => console.log('onTouchEnd')}
onTouchCancel={e => console.log('onTouchCancel')}
/>
Параметри
TransitionEvent функція-обробник
Тип обробника подій для подій переходу CSS.
<div
onTransitionEnd={e => console.log('onTransitionEnd')}
/>
Параметри
UIEvent функція-обробник
Тип обробника подій для типових подій інтерфейсу
<div
onScroll={e => console.log('onScroll')}
/>
Параметри
e: Об'єкт події React з такими додатковими UIEvent властивостями:
WheelEvent функція-обробник
Тип обробника події для події onWheel.
<div
onWheel={e => console.log('onWheel')}
/>
Параметри
e: Об'єкт події React з такими додатковими WheelEvent властивостями:
Він також включає успадковані MouseEvent властивості:
Він також включає успадковані UIEvent властивості:
Використання
Застосування стилів 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.