רכיבים נפוצים (למשל <div>)

כל רכיבי הדפדפן המובנים, כגון <div>, תומכים בכמה props ואירועים נפוצים.

הפניה
שימוש

הפניה

רכיבים נפוצים (למשל `<div>`)

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

ראה דוגמאות נוספות למטה.

אבזרים

React props מיוחדים אלה נתמכים עבור כל הרכיבים המובנים:

children: צומת React (אלמנט, מחרוזת, מספר, פורטל, צומת ריק כמו null, undefined ובוליאנים, או מערך של צמתים React אחרים). מציין את התוכן בתוך הרכיב. כאשר אתה use JSX, בדרך כלל תציין את אבזר children באופן מרומז על ידי קינון תגיות כמו <div><span /></div>.
dangerouslySetInnerHTML: אובייקט בצורת { __html: '<p>some html</p>' } עם מחרוזת HTML גולמית בפנים. עוקף את המאפיין innerHTML של הצומת DOM ומציג את ה-HTML שעבר בפנים. זה צריך להיות used בזהירות יתרה! אם ה-HTML בפנים אינו מהימן (לדוגמה, אם הוא מבוסס על HTML בסיכון), אתה XSS פגיעות. קרא עוד על השימוש ב-dangerouslySetInnerHTML.
ref: אובייקט ref מ-useRef או createRef, או ref פונקציית התקשרות חוזרת, או מחרוזת עבור [Refs מדור קודם.]_‎ צומת קרא עוד על מניפולציה של DOM עם refs.
suppressContentEditableWarning: בוליאני. אם true, מדחיק את האזהרה שReact מציגה עבור רכיבים שיש להם children וcontentEditable={true} (שבדרך כלל אינם פועלים יחד). השתמש בזה אם אתה בונה ספריית קלט טקסט שמנהלת את התוכן contentEditable באופן ידני.
suppressHydrationWarning: בוליאני. אם אתה use עיבוד שרת, בדרך כלל יש אזהרה כאשר השרת והלקוח מציגים תוכן שונה. במקרים נדירים מסוימים (כמו חותמות זמן), קשה מאוד או בלתי אפשרי להבטיח התאמה מדויקת. אם תגדיר את suppressHydrationWarning ל-true, React לא יזהיר אותך על אי התאמה בתכונות ובתוכן של רכיב זה. זה עובד רק ברמה אחת בעומק, ומיועד להיות used כפתח מילוט. אל תגזים עםuse. קרא על דיכוי שגיאות הידרציה.
style: אובייקט עם סגנונות CSS, למשל { fontWeight: 'bold', margin: 20 }. בדומה למאפיין DOM style, שמות המאפיינים CSS צריכים להיכתב כ-camelCase, למשל fontWeight במקום font-weight. ניתן להעביר מחרוזות או מספרים כערכים. אם תעביר מספר K_ __4 באופן אוטומטי, TK___1 px (“פיקסלים”) לערך אלא אם כן מדובר במאפיין יחידה ללא יחידות. אנו ממליצים להשתמש ב-style רק עבור סגנונות דינמיים שבהם אינכם יודעים את ערכי הסגנון מראש. במקרים אחרים, יישום מחלקות CSS רגילות עם https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) יעיל יותר לגבי className. style.](#applying-css-styles)

DOM props סטנדרטיים אלה נתמכים גם עבור כל הרכיבים המובנים:

accessKey: מחרוזת. מציינת קיצור מקשים עבור האלמנט. לא מומלץ בדרך כלל.
aria-*: תכונות ARIA מאפשרות לך לציין את מידע עץ הנגישות עבור רכיב זה. ראה ARIA attributes לעיון מלא. ב-React, כל שמות המאפיינים של ARIA זהים לחלוטין לאלו ב-HTML.
autoCapitalize: מחרוזת. מציין אם וכיצד יש להשתמש באותיות רישיות בקלט user.
className: מחרוזת. מציינת את שם המחלקה CSS של האלמנט. קרא עוד על החלת סגנונות CSS.
contentEditable: בוליאני. אם true, הדפדפן מאפשר ל-user לערוך את האלמנט המעובד ישירות. זהו used ליישם ספריות קלט טקסט עשיר כמו Lexical. user React אזהרות אם תנסה להעביר לילדים React contentEditable={true} because React לא יוכל לעדכן את התוכן שלו לאחר עריכות user.
data-*: תכונות נתונים מאפשרות לך לצרף כמה נתוני מחרוזת לאלמנט, למשל data-fruit="banana". ב-React, הם לא בדרך כלל used מכיוון שuse בדרך כלל היית קורא נתונים מ-props או state במקום זאת.
dir: או 'ltr' או 'rtl'. מציין את כיוון הטקסט של האלמנט.
draggable: ערך בוליאני. מציין אם האלמנט ניתן לגרירה. חלק מ-HTML גרור ושחרר API.
enterKeyHint: מחרוזת. מציינת איזו פעולה להציג עבור מקש Enter במקלדות וירטואליות.
htmlFor: מחרוזת. עבור <label> ו-<output>, מאפשרת לך לשייך את התווית לשליטה מסוימת. Sam__ for-an-__0 attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for) React uses שמות המאפיינים הסטנדרטיים DOM (htmlFor) במקום HTML שמות המאפיינים.
hidden: בוליאני או מחרוזת. מציין אם יש להסתיר את האלמנט.
id: מחרוזת. מציין מזהה ייחודי לרכיב זה, שיכול להיות used כדי למצוא אותו מאוחר יותר או לחבר אותו עם אלמנטים אחרים. צור אותו עם 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 עדיין לא use את האירוע ה
onBeforeInputCapture: גרסה של onBeforeInput שנורה בשלב לכידה.
onBlur: פונקציה FocusEvent מטפל. Fires when an element lost focus. שלא כמו הדפדפן המובנה blur אירוע, ב-React האירוע onBlur בועות.
onBlurCapture: גרסה של onBlur שנורה בשלב לכידה.
פונקציה onClick: פונקציית MouseEvent מטפל. מופעל כאשר הלחצן הראשי נלחץ על התקן ההצבעה.
onClickCapture: גרסה של onClick שנורה בשלב לכידה.
onCompositionStart: פונקציה CompositionEvent מטפל. מופעל כאשר עורך שיטת קלט מתחיל הפעלה חדשה של חיבור.
onCompositionStartCapture: גרסה של onCompositionStart שנורה בשלב לכידה.
onCompositionEnd: פונקציית CompositionEvent מטפל. מופעל כאשר עורך שיטת קלט משלים או מבטל הפעלה של קומפוזיציה.
onCompositionEndCapture: גרסה של onCompositionEnd שנורה בשלב לכידה.
onCompositionUpdate: פונקציה CompositionEvent מטפל. מופעל כאשר עורך שיטת קלט מקבל תו חדש.
onCompositionUpdateCapture: גרסה של onCompositionUpdate שנורה בשלב לכידה.
פונקציה onContextMenu: מטפל MouseEvent. מופעל כאשר ה-user מנסה לפתוח תפריט הקשר.
onContextMenuCapture: גרסה של onContextMenu שנורה בשלב לכידה.
onCopy: פונקציה ClipboardEvent מטפל. מופעלת כאשר ה-user מנסה להעתיק משהו ללוח.
onCopyCapture: גרסה של onCopy שנורה בשלב לכידה.
onCut: פונקציה ClipboardEvent מטפל. מופעלת כאשר ה-user מנסה לחתוך משהו לתוך הלוח.
onCutCapture: גרסה של onCut שנורה בשלב לכידה.
onDoubleClick: פונקציה MouseEvent מטפל. נדלק כאשר ה-user לוחץ פעמיים. מתאים לדפדפן dblclick אירוע.
onDoubleClickCapture: גרסה של onDoubleClick שנורה בשלב לכידה.
onDrag: פונקציה DragEvent מטפל. מופעלת בזמן שה-user גורר משהו.
onDragCapture: גרסה של onDrag שנורה בשלב לכידה.
onDragEnd: פונקציה DragEvent מטפל. מופעל כאשר ה-user מפסיק לגרור משהו.
onDragEndCapture: גרסה של onDragEnd שנורה בשלב לכידה.
onDragEnter: פונקציה DragEvent מטפל. מופעלת כאשר התוכן הנגרר נכנס ליעד שחרור חוקי.
onDragEnterCapture: גרסה של onDragEnter שנורה בשלב לכידה.
onDragOver: פונקציה DragEvent מטפל. יורה על יעד שחרור חוקי בזמן שהתוכן הנגרר נגרר מעליו. עליך לקרוא ל-e.preventDefault() כאן כדי לאפשר שחרור.
onDragOverCapture: גרסה של onDragOver שנורה בשלב לכידה.
onDragStart: פונקציה DragEvent מטפל. מופעלת כאשר ה-user מתחיל לגרור אלמנט.
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 handler. מופעלת כאשר מצביע זז מחוץ לאלמנט. אין לו שלב לכידה. במקום זאת, onPointerLeave וonPointerEnter מתפשטים מהאלמנט הנשאר לזה הנכנס.
onPointerMove: פונקציה PointerEvent מטפל. מופעל כאשר מצביע משנה קואורדינטות.
onPointerMoveCapture: גרסה של onPointerMove שנורה בשלב לכידה.
onPointerOut: פונקציה PointerEvent מטפל. מופעלת כאשר מצביע זז מחוץ לאלמנט, אם אינטראקציית המצביע מבוטלת, ועוד כמה סיבות.
onPointerOutCapture: גרסה של onPointerOut שנורה בשלב לכידה.
onPointerUp: פונקציה PointerEvent מטפל. מופעל כאשר מצביע אינו פעיל יותר.
onPointerUpCapture: גרסה של onPointerUp שנורה בשלב לכידה.
onPaste: פונקציה ClipboardEvent מטפל. מופעלת כאשר ה-user מנסה להדביק משהו מהלוח.
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 מטפל. נורה כאשר ה-user מסובב כפתור גלגל.
onWheelCapture: גרסה של onWheel שנורה בשלב לכידה.
role: מחרוזת. מציין את תפקיד האלמנט במפורש עבור טכנולוגיות מסייעות.
slot: מחרוזת. מציין את שם המשבצת בעת שימוש בצל DOM. ב-React, בדרך כלל מושגת דפוס שווה ערך על ידי העברת JSX בתור props, למשל <Layout left={<Sidebar />} right={<Content />} />.
spellCheck: בוליאני או null. אם מוגדר במפורש ל-true או false, מפעיל או משבית את בדיקת האיות.
tabIndex: מספר. עוקף את התנהגות ברירת המחדל של לחצן Tab. הימנע משימוש בערכים אחרים מלבד -1 ו0.
title: מחרוזת. מציין את טקסט הסבר הכלי עבור האלמנט.
translate: או 'yes' או 'no'. מעבר של 'no' לא כולל את תוכן הרכיב מתרגום.

אתה יכול גם להעביר מאפיינים מותאמים אישית בתור props, למשל mycustomprop="someValue". זה יכול להיות use מלא בעת שילוב עם ספריות של צד שלישי. שם התכונה המותאמת אישית חייב להיות באותיות קטנות ואסור להתחיל ב-on. הערך יומר למחרוזת. אם תעבור את null או undefined, המאפיין המותאם אישית יוסר.

אירועים אלה פועלים רק עבור <form> אלמנטים:

onReset: פונקציה Event מטפל. מופעלת כאשר טופס מתאפס.
onResetCapture: גרסה של onReset שנורה בשלב לכידה.
onSubmit: פונקציה Event מטפל. מופעלת כאשר טופס נשלח.
onSubmitCapture: גרסה של onSubmit שנורה בשלב לכידה.

אירועים אלו מופעלים רק עבור האלמנטים <dialog>. בניגוד לאירועי דפדפן, הם מבעבעים ב-React:

onCancel: פונקציה Event מטפל. מופעלת כאשר ה-user מנסה לבטל את תיבת הדו-שיח.
onCancelCapture: גרסה של onCancel שנורה בשלב לכידה.
onClose: פונקציית Event מטפל. מופעלת כאשר דו-שיח נסגר.
onCloseCapture: גרסה של onClose שנורה בשלב לכידה.

אירועים אלו מופעלים רק עבור האלמנטים <details>. בניגוד לאירועי דפדפן, הם מבעבעים ב-React:

onToggle: פונקציית Event מטפל. מופעלת כאשר ה-user מחליף את הפרטים.
onToggleCapture: גרסה של onToggle שנורה בשלב לכידה.

האירועים האלה מופעלים עבור <img>, <iframe>, <object>, <embed>, <link>, ו-SVG <iframe>, <object>, <embed>, <link>, ו-[SVG <image>] לא אוהבות את האלמנטים של הדפדפן, _TK 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 מטפל. מופעל כאשר המדיה הייתה paused.
onPauseCapture: גרסה של onPause שנורה בשלב לכידה.
onPlay: פונקציית Event מטפל. מופעל כאשר המדיה כבר לא paused.
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 ההתקשרות חזרה בכל עיבוד, ה-callback ינותק באופן זמני ויצורף מחדש במהלך כל רינדור מחדש של הרכיב.

מחזירה

אל תחזיר דבר מההתקשרות חזרה 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: ערך בוליאני. מחזירה אם האירוע יזם על ידי user.
target: צומת DOM. מחזירה את הצומת שבו התרחש האירוע (שיכול להיות ילד מרוחק).
timeStamp: מספר. מחזירה את הזמן שבו התרחש האירוע.

בנוסף, אובייקטי אירוע React מספקים את המאפיינים הבאים:

nativeEvent: A DOM Event. אובייקט אירוע הדפדפן המקורי.

שיטות

React אובייקטי אירועים מיישמים חלק מהשיטות הסטנדרטיות Event:

preventDefault(): מונע את פעולת ברירת המחדל של הדפדפן עבור האירוע.
stopPropagation(): עוצר את התפשטות האירוע דרך עץ React.

בנוסף, אובייקטי אירוע React מספקים את השיטות הבאות:

isDefaultPrevented(): מחזירה ערך בוליאני המציין אם preventDefault נקרא.
isPropagationStopped(): מחזירה ערך בוליאני המציין אם stopPropagation נקרא.
persist(): לא used עם React DOM. עם React Native, קרא לזה כדי לקרוא את מאפייני האירוע לאחר האירוע.
isPersistent(): לא used עם 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 אירוע עם AnimationEvent מאפיינים נוספים:

`ClipboardEvent` פונקציית מטפל

סוג מטפל באירועים עבור לוח 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] (https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent) מאפיינים נוספים:
- data

`DragEvent` פונקציית מטפל

סוג מטפל באירועים עבור HTML גרור ושחרר 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] (https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) מאפיינים נוספים:
- dataTransfer

הוא כולל גם את המאפיינים [MouseEvent] (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)) שעברו בירושה:

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

הוא כולל גם את המאפיינים [UIEvent] (https://developer.mozilla.org/en-US/docs/Web/API/UIEvent)) שעברו בירושה:

detail
- view

`FocusEvent` פונקציית מטפל

סוג מטפל באירועים עבור אירועי המיקוד.

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

ראה דוגמה.

פרמטרים

e: React אובייקט אירוע עם [FocusEvent] (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) מאפיינים נוספים:
- relatedTarget

הוא כולל גם את המאפיינים [UIEvent] (https://developer.mozilla.org/en-US/docs/Web/API/UIEvent)) שעברו בירושה:

detail
- view

`Event` פונקציית מטפל

סוג מטפל באירועים עבור אירועים גנריים.

פרמטרים

e: אובייקט React אירוע ללא מאפיינים נוספים.

`InputEvent` פונקציית מטפל

סוג מטפל באירוע עבור האירוע onBeforeInput.

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

פרמטרים

e: React אובייקט אירוע עם [InputEvent] (https://developer.mozilla.org/en-US/docs/Web/API/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] (https://developer.mozilla.org/en-US/docs/Web/API/UIEvent)) שעברו בירושה:

detail
- view

`MouseEvent` פונקציית מטפל

סוג מטפל באירועים עבור אירועי mouse.

<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] (https://developer.mozilla.org/en-US/docs/Web/API/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 אובייקט אירוע עם PointerEvent מאפיינים נוספים:
- height
- isPrimary
- pointerId
- pointerType
- pressure
- tangentialPressure
- tiltX
- tiltY
- twist
- width

הוא כולל גם את המאפיינים [MouseEvent] (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)) שעברו בירושה:

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

הוא כולל גם את המאפיינים [UIEvent] (https://developer.mozilla.org/en-US/docs/Web/API/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] (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) מאפיינים נוספים:

הוא כולל גם את המאפיינים [UIEvent] (https://developer.mozilla.org/en-US/docs/Web/API/UIEvent)) שעברו בירושה:

detail
- view

`TransitionEvent` פונקציית מטפל

סוג מטפל באירועים עבור אירועי המעבר CSS.

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

פרמטרים

e: אובייקט React אירוע עם TransitionEvent מאפיינים נוספים:

`UIEvent` פונקציית מטפל

סוג מטפל באירועים עבור אירועי ממשק משתמש כלליים.

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

פרמטרים

e: React אובייקט אירוע עם [UIEvent] (https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) מאפיינים נוספים:
- detail
- view

`WheelEvent` פונקציית מטפל

סוג מטפל באירוע עבור האירוע onWheel.

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

פרמטרים

e: React אובייקט אירוע עם WheelEvent מאפיינים נוספים:

הוא כולל גם את המאפיינים [MouseEvent] (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)) שעברו בירושה:

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

הוא כולל גם את המאפיינים [UIEvent] (https://developer.mozilla.org/en-US/docs/Web/API/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 שלך. אם אתה use כלי בנייה או מסגרת, עיין בתיעוד שלו כדי ללמוד כיצד להוסיף קובץ CSS לפרויקט שלך.

לפעמים, ערכי הסגנון תלויים בנתונים. השתמש בתכונה style כדי להעביר כמה סגנונות באופן דינמי:

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

בדוגמה שלמעלה, style={{}} אינו תחביר מיוחד, אלא אובייקט {} רגיל בתוך style={ } JSX סוגרים מסולסלים. אנו ממליצים להשתמש רק בתכונה style 4__ כאשר המשתנים __T שלך תלויים בסגנונות TK.

Fork

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

Deep Dive

כיצד להחיל מספר מחלקות CSS באופן מותנה?

כדי להחיל שיעורים CSS באופן מותנה, עליך להפיק את המחרוזת className בעצמך באמצעות JavaScript.

לדוגמה, className={'row ' + (isSelected ? 'selected': '')} יפיק className="row" או className="row selected" תלוי אם isSelected הוא true.

כדי להפוך את זה לקריאה יותר, אתה יכול use ספריית עוזר זעירה כמו 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 עם ref

לפעמים, תצטרך להשיג את צומת הדפדפן DOM המשויך לתג ב-JSX. לדוגמה, אם ברצונך למקד <input> בעת לחיצה על כפתור, עליך לקרוא ל-focus() בצומת <input> DOM של הדפדפן.

כדי להשיג את הצומת DOM של הדפדפן עבור תג, הכרז על ref והעביר אותו כתכונה ref לתג זה:

import { useRef } from 'react';

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

React יכניס את הצומת DOM לתוך inputRef.current לאחר שהוא יועבר למסך.

Fork

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 ועל בדוק דוגמאות נוספות.

למקרים מתקדמים יותר של use, התכונה ref מקבלת גם פונקציית התקשרות חוזרת.

הגדרה מסוכנת של HTML הפנימית

אתה יכול להעביר מחרוזת HTML גולמית לאלמנט כך:

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

זה מסוכן. בדומה למאפיין הבסיסי DOM innerHTML, עליך לנקוט משנה זהירות! אלא אם כן הסימון מגיע ממקור מהימן לחלוטין, זה טריוויאלי להציג פגיעות XSS בדרך זו.

לדוגמה, אם אתה use ספריית Markdown הממירה את Markdown ל-HTML, אתה סומך על כך שהמנתח שלה אינו מכיל באגים, וה-user רואה רק את הקלט שלו, אתה יכול להציג את ה-HTML שנוצר כך:

Fork

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 הגולמי שהוא used בקוד שלך מסומן באופן מפורש ככזה, ושרק משתנים שאתה מצפה שיכילו HTML מועברים אל dangerouslySetInnerHTML. לא מומלץ ליצור את האובייקט בשורה כמו <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 יפעל. האקר יכול use את חור האבטחה הזה כדי לגנוב מידע user או לבצע פעולות בשמם. רק use dangerouslySetInnerHTML עם נתונים מהימנים ומחוטאים.

טיפול באירועי mouse

דוגמה זו מציגה כמה [mouse אירועים] נפוצים (#mouseevent-handler) ומתי הם יורים.

Fork

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

טיפול באירועי מצביע

דוגמה זו מציגה כמה [אירועי מצביע] נפוצים (#pointerevent-handler) ומתי הם פועלים.

Fork

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, בועה פוקוס אירועים. אתה יכול use את currentTarget ואת relatedTarget כדי להבדיל אם אירועי המיקוד או הטשטוש מקורם מחוץ לאלמנט האב. הדוגמה מראה כיצד לזהות מיקוד של ילד, מיקוד של אלמנט האב וכיצד לזהות מיקוד שנכנס או עוזב את כל המשנה.

Fork

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

טיפול באירועי מקלדת

דוגמה זו מציגה כמה [אירועי מקלדת] נפוצים (#keyboardevent-handler) ומתי הם פועלים.

Fork

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

Previousקומפוננטות

Next<form>

רכיבים נפוצים (למשל <div>)

הפניה

רכיבים נפוצים (למשל <div>)

אבזרים

אזהרות

ref פונקציית התקשרות חוזרת

פרמטרים

מחזירה

React אובייקט אירוע

מאפיינים

שיטות

אזהרות

AnimationEvent פונקציית מטפל

פרמטרים

ClipboardEvent פונקציית מטפל

פרמטרים

CompositionEvent פונקציית מטפל

פרמטרים

DragEvent פונקציית מטפל

פרמטרים

FocusEvent פונקציית מטפל

פרמטרים

Event פונקציית מטפל

פרמטרים

InputEvent פונקציית מטפל

פרמטרים

KeyboardEvent פונקציית מטפל

פרמטרים

MouseEvent פונקציית מטפל

פרמטרים

PointerEvent פונקציית מטפל

פרמטרים

TouchEvent פונקציית מטפל

פרמטרים

TransitionEvent פונקציית מטפל

פרמטרים

UIEvent פונקציית מטפל

פרמטרים

WheelEvent פונקציית מטפל

פרמטרים

שימוש

החלת CSS סגנונות

Deep Dive

כיצד להחיל מספר מחלקות CSS באופן מותנה?

מניפולציה של צומת DOM עם ref

הגדרה מסוכנת של HTML הפנימית

טיפול באירועי mouse

טיפול באירועי מצביע

טיפול באירועי מיקוד

טיפול באירועי מקלדת

רכיבים נפוצים (למשל `<div>`)

`ref` פונקציית התקשרות חוזרת

`AnimationEvent` פונקציית מטפל

`ClipboardEvent` פונקציית מטפל

`CompositionEvent` פונקציית מטפל

`DragEvent` פונקציית מטפל

`FocusEvent` פונקציית מטפל

`Event` פונקציית מטפל

`InputEvent` פונקציית מטפל

`KeyboardEvent` פונקציית מטפל

`MouseEvent` פונקציית מטפל

`PointerEvent` פונקציית מטפל

`TouchEvent` פונקציית מטפל

`TransitionEvent` פונקציית מטפל

`UIEvent` פונקציית מטפל

`WheelEvent` פונקציית מטפל