பொதுவான components (எ.கா. <div>)

• Reference
  • பொதுவான components (எ.கா. <div>)
  • ref callback function
  • React event object
  • AnimationEvent handler function
  • ClipboardEvent handler function
  • CompositionEvent handler function
  • DragEvent handler function
  • FocusEvent handler function
  • Event handler function
  • InputEvent handler function
  • KeyboardEvent handler function
  • MouseEvent handler function
  • PointerEvent handler function
  • TouchEvent handler function
  • TransitionEvent handler function
  • UIEvent handler function
  • WheelEvent handler function
• Usage
  • CSS styles பயன்படுத்துதல்
  • Ref மூலம் DOM node-ஐ கையாளுதல்
  • Inner HTML-ஐ ஆபத்தான முறையில் set செய்தல்
  • Mouse events கையாளுதல்
  • Pointer events கையாளுதல்
  • Focus events கையாளுதல்
  • Keyboard events கையாளுதல்

Reference

பொதுவான components (எ.கா. <div>)

<div className="wrapper">சில உள்ளடக்கம்</div>

மேலும் examples-ஐ கீழே பார்க்கவும்.

Props

இந்த சிறப்பு React props எல்லா built-in components-க்கும் support செய்யப்படுகின்றன:

• children: ஒரு React node (element, string, number, portal, null, undefined மற்றும் booleans போன்ற empty node, அல்லது பிற React nodes-ன் array). Component-க்குள் உள்ள content-ஐ குறிப்பிடுகிறது. JSX பயன்படுத்தும்போது, பொதுவாக <div><span /></div> போன்ற nested tags மூலம் children prop-ஐ மறைமுகமாக குறிப்பிடுவீர்கள்.

• dangerouslySetInnerHTML: உள்ளே raw HTML string கொண்ட { __html: '<p>some html</p>' } வடிவ object. DOM node-ன் innerHTML property-ஐ override செய்து, pass செய்யப்பட்ட HTML-ஐ உள்ளே காட்டுகிறது. இதை மிகுந்த கவனத்துடன் மட்டுமே பயன்படுத்த வேண்டும்! உள்ளிருக்கும் HTML நம்பத்தகுந்ததல்ல என்றால் (உதாரணமாக, அது user data அடிப்படையாக இருந்தால்), XSS vulnerability சேர்க்கும் அபாயம் உண்டு. dangerouslySetInnerHTML பயன்படுத்துவது பற்றி மேலும் வாசிக்கவும்.

• ref: useRef அல்லது createRef-இலிருந்து கிடைக்கும் ref object, ref callback function, அல்லது legacy refs-க்கான string. இந்த node-க்கான DOM element உங்கள் ref-இல் நிரப்பப்படும். Refs மூலம் DOM-ஐ கையாளுவது பற்றி மேலும் வாசிக்கவும்.

• suppressContentEditableWarning: ஒரு boolean. true என்றால், children மற்றும் contentEditable={true} இரண்டும் கொண்ட elements-க்கு React காட்டும் warning-ஐ suppress செய்கிறது (இவை பொதுவாக ஒன்றாகச் சரியாக வேலை செய்யாது). contentEditable content-ஐ கையால் நிர்வகிக்கும் text input library உருவாக்கினால் இதைப் பயன்படுத்துங்கள்.

• suppressHydrationWarning: ஒரு boolean. நீங்கள் server rendering பயன்படுத்தினால், server மற்றும் client வேறு content render செய்யும்போது பொதுவாக warning வரும். சில அரிய சந்தர்ப்பங்களில் (timestamps போன்றவை), exact match-ஐ உறுதி செய்வது மிகவும் கடினமாகவோ சாத்தியமற்றதாகவோ இருக்கும். suppressHydrationWarning-ஐ true ஆக set செய்தால், அந்த element-ன் attributes மற்றும் content-இல் உள்ள mismatches குறித்து React warning காட்டாது. இது ஒரு level ஆழம் மட்டுமே வேலை செய்யும்; escape hatch ஆகப் பயன்படுத்துவதற்கானது. இதை மிகையாகப் பயன்படுத்த வேண்டாம். Hydration errors-ஐ suppress செய்வது பற்றி வாசிக்கவும்.

• style: CSS styles கொண்ட object, உதாரணமாக { fontWeight: 'bold', margin: 20 }. DOM style property போலவே, CSS property பெயர்கள் font-weight என்பதற்குப் பதிலாக fontWeight போன்ற camelCase வடிவில் எழுதப்பட வேண்டும். Values ஆக strings அல்லது numbers pass செய்யலாம். width: 100 போன்ற number pass செய்தால், அது unitless property அல்லாத வரை React value-க்கு தானாக px (“pixels”) சேர்க்கும். Style values முன்கூட்டியே தெரியாத dynamic styles-க்கு மட்டும் style பயன்படுத்த பரிந்துரைக்கிறோம். மற்ற சந்தர்ப்பங்களில், className மூலம் plain CSS classes பயன்படுத்துவது அதிக திறனானது. className மற்றும் style பற்றி மேலும் வாசிக்கவும்.

இந்த standard DOM props-உம் எல்லா built-in components-க்கும் support செய்யப்படுகின்றன:

• accessKey: ஒரு string. Element-க்கான keyboard shortcut-ஐ குறிப்பிடுகிறது. பொதுவாக பரிந்துரைக்கப்படாது.
• aria-*: ARIA attributes இந்த element-க்கான accessibility tree தகவலை குறிப்பிட அனுமதிக்கின்றன. முழு reference-க்கு ARIA attributes பார்க்கவும். React-இல், எல்லா ARIA attribute பெயர்களும் HTML-இல் இருப்பதுபோலவே இருக்கும்.
• autoCapitalize: ஒரு string. User input capitalized ஆக வேண்டுமா, எப்படி ஆக வேண்டும் என்பதை குறிப்பிடுகிறது.
• className: ஒரு string. Element-ன் CSS class name-ஐ குறிப்பிடுகிறது. CSS styles பயன்படுத்துவது பற்றி மேலும் வாசிக்கவும்.
• contentEditable: ஒரு boolean. true என்றால், rendered element-ஐ user நேரடியாக edit செய்ய browser அனுமதிக்கும். Lexical போன்ற rich text input libraries உருவாக்க இதைப் பயன்படுத்துகிறார்கள். contentEditable={true} கொண்ட element-க்கு React children pass செய்ய முயன்றால் React warning காட்டும்; user edits-க்குப் பிறகு அதன் content-ஐ React update செய்ய முடியாது.
• data-*: Data attributes மூலம் element-க்கு சில string data attach செய்யலாம், உதாரணமாக data-fruit="banana". React-இல் இவை பொதுவாக பயன்படுத்தப்படாது, ஏனெனில் data-வை props அல்லது state-இலிருந்து வாசிப்பதே வழக்கம்.
• dir: 'ltr' அல்லது 'rtl'. Element-ன் text direction-ஐ குறிப்பிடுகிறது.
• draggable: ஒரு boolean. Element draggable ஆக இருக்க வேண்டுமா என்பதை குறிப்பிடுகிறது. HTML Drag and Drop API-ன் ஒரு பகுதி.
• enterKeyHint: ஒரு string. Virtual keyboards-இல் enter key-க்கு எந்த action காட்ட வேண்டும் என்பதை குறிப்பிடுகிறது.
• htmlFor: ஒரு string. <label> மற்றும் <output>-க்கு, label-ஐ ஒரு control-உடன் இணைக்க அனுமதிக்கிறது. இது for HTML attribute-க்கு சமம். React HTML attribute பெயர்களுக்குப் பதிலாக standard DOM property names (htmlFor) பயன்படுத்துகிறது.
• hidden: ஒரு boolean அல்லது string. Element hidden ஆக இருக்க வேண்டுமா என்பதை குறிப்பிடுகிறது.
• id: ஒரு string. இந்த element-க்கான unique identifier-ஐ குறிப்பிடுகிறது; பின்னர் அதை கண்டுபிடிக்க அல்லது பிற elements-உடன் இணைக்க இதைப் பயன்படுத்தலாம். ஒரே component-ன் பல instances இடையே conflicts தவிர்க்க useId மூலம் உருவாக்குங்கள்.
• is: ஒரு string. குறிப்பிடப்பட்டால், component ஒரு custom element போல நடக்கும்.
• inputMode: ஒரு string. எந்த வகை keyboard காட்ட வேண்டும் என்பதை குறிப்பிடுகிறது (உதாரணமாக text, number, அல்லது telephone).
• itemProp: ஒரு string. Structured data crawlers-க்கு element எந்த property-யை represent செய்கிறது என்பதை குறிப்பிடுகிறது.
• lang: ஒரு string. Element-ன் மொழியை குறிப்பிடுகிறது.
• onAnimationEnd: ஒரு AnimationEvent handler function. CSS animation முடிந்தபோது fire ஆகும்.
• onAnimationEndCapture: capture phase-இல் fire ஆகும் onAnimationEnd-ன் version.
• onAnimationIteration: ஒரு AnimationEvent handler function. CSS animation-ன் ஒரு iteration முடிந்து மற்றொன்று தொடங்கும்போது fire ஆகும்.
• onAnimationIterationCapture: capture phase-இல் fire ஆகும் onAnimationIteration-ன் version.
• onAnimationStart: ஒரு AnimationEvent handler function. CSS animation தொடங்கும்போது fire ஆகும்.
• onAnimationStartCapture: capture phase-இல் fire ஆகும் onAnimationStart.
• onAuxClick: ஒரு MouseEvent handler function. Primary அல்லாத pointer button click செய்யப்படும் போது fire ஆகும்.
• onAuxClickCapture: capture phase-இல் fire ஆகும் onAuxClick-ன் version.
• onBeforeInput: ஒரு InputEvent handler function. Editable element-ன் value மாற்றப்படுவதற்கு முன் fire ஆகும். React இன்னும் native beforeinput event-ஐ பயன்படுத்தவில்லை; அதற்கு பதிலாக பிற events மூலம் polyfill செய்ய முயல்கிறது.
• onBeforeInputCapture: capture phase-இல் fire ஆகும் onBeforeInput-ன் version.
• onBlur: ஒரு FocusEvent handler function. Element focus இழக்கும்போது fire ஆகும். Built-in browser blur event போல அல்லாமல், React-இல் onBlur event bubbles ஆகும்.
• onBlurCapture: capture phase-இல் fire ஆகும் onBlur-ன் version.
• onClick: ஒரு MouseEvent handler function. Pointing device-இல் primary button click செய்யப்படும் போது fire ஆகும்.
• onClickCapture: capture phase-இல் fire ஆகும் onClick-ன் version.
• onCompositionStart: ஒரு CompositionEvent handler function. Input method editor புதிய composition session தொடங்கும்போது fire ஆகும்.
• onCompositionStartCapture: capture phase-இல் fire ஆகும் onCompositionStart-ன் version.
• onCompositionEnd: ஒரு CompositionEvent handler function. Input method editor composition session-ஐ complete அல்லது cancel செய்யும்போது fire ஆகும்.
• onCompositionEndCapture: capture phase-இல் fire ஆகும் onCompositionEnd-ன் version.
• onCompositionUpdate: ஒரு CompositionEvent handler function. Input method editor புதிய character பெறும்போது fire ஆகும்.
• onCompositionUpdateCapture: capture phase-இல் fire ஆகும் onCompositionUpdate-ன் version.
• onContextMenu: ஒரு MouseEvent handler function. User context menu திறக்க முயன்றால் fire ஆகும்.
• onContextMenuCapture: capture phase-இல் fire ஆகும் onContextMenu-ன் version.
• onCopy: ஒரு ClipboardEvent handler function. User clipboard-க்கு ஏதாவது copy செய்ய முயன்றால் fire ஆகும்.
• onCopyCapture: capture phase-இல் fire ஆகும் onCopy-ன் version.
• onCut: ஒரு ClipboardEvent handler function. User clipboard-க்கு ஏதாவது cut செய்ய முயன்றால் fire ஆகும்.
• onCutCapture: capture phase-இல் fire ஆகும் onCut-ன் version.
• onDoubleClick: ஒரு MouseEvent handler function. User இருமுறை click செய்யும்போது fire ஆகும். Browser dblclick event-க்கு இணையானது.
• onDoubleClickCapture: capture phase-இல் fire ஆகும் onDoubleClick-ன் version.
• onDrag: ஒரு DragEvent handler function. User ஏதாவது drag செய்யும் போது fire ஆகும்.
• onDragCapture: capture phase-இல் fire ஆகும் onDrag-ன் version.
• onDragEnd: ஒரு DragEvent handler function. User drag செய்வதை நிறுத்தும்போது fire ஆகும்.
• onDragEndCapture: capture phase-இல் fire ஆகும் onDragEnd-ன் version.
• onDragEnter: ஒரு DragEvent handler function. Drag செய்யப்படும் content valid drop target-க்குள் நுழையும் போது fire ஆகும்.
• onDragEnterCapture: capture phase-இல் fire ஆகும் onDragEnter-ன் version.
• onDragOver: ஒரு DragEvent handler function. Drag செய்யப்படும் content valid drop target மேல் இருக்கும் போது fire ஆகும். Drop செய்ய அனுமதிக்க இங்கே e.preventDefault() call செய்ய வேண்டும்.
• onDragOverCapture: capture phase-இல் fire ஆகும் onDragOver-ன் version.
• onDragStart: ஒரு DragEvent handler function. User ஒரு element-ஐ drag செய்யத் தொடங்கும்போது fire ஆகும்.
• onDragStartCapture: capture phase-இல் fire ஆகும் onDragStart-ன் version.
• onDrop: ஒரு DragEvent handler function. ஏதாவது valid drop target மீது drop செய்யப்பட்டால் fire ஆகும்.
• onDropCapture: capture phase-இல் fire ஆகும் onDrop-ன் version.
• onFocus: ஒரு FocusEvent handler function. Element focus பெறும்போது fire ஆகும். Built-in browser focus event போல அல்லாமல், React-இல் onFocus event bubbles ஆகும்.
• onFocusCapture: capture phase-இல் fire ஆகும் onFocus-ன் version.
• onGotPointerCapture: ஒரு PointerEvent handler function. Element code மூலம் pointer-ஐ capture செய்யும்போது fire ஆகும்.
• onGotPointerCaptureCapture: capture phase-இல் fire ஆகும் onGotPointerCapture-ன் version.
• onKeyDown: ஒரு KeyboardEvent handler function. Key press செய்யப்படும் போது fire ஆகும்.
• onKeyDownCapture: capture phase-இல் fire ஆகும் onKeyDown-ன் version.
• onKeyPress: ஒரு KeyboardEvent handler function. Deprecated. அதற்குப் பதிலாக onKeyDown அல்லது onBeforeInput பயன்படுத்துங்கள்.
• onKeyPressCapture: capture phase-இல் fire ஆகும் onKeyPress-ன் version.
• onKeyUp: ஒரு KeyboardEvent handler function. Key release செய்யப்படும் போது fire ஆகும்.
• onKeyUpCapture: capture phase-இல் fire ஆகும் onKeyUp-ன் version.
• onLostPointerCapture: ஒரு PointerEvent handler function. Element pointer capture செய்வதை நிறுத்தும்போது fire ஆகும்.
• onLostPointerCaptureCapture: capture phase-இல் fire ஆகும் onLostPointerCapture-ன் version.
• onMouseDown: ஒரு MouseEvent handler function. Pointer அழுத்தப்படும் போது fire ஆகும்.
• onMouseDownCapture: capture phase-இல் fire ஆகும் onMouseDown-ன் version.
• onMouseEnter: ஒரு MouseEvent handler function. Pointer ஒரு element-க்குள் நகரும்போது fire ஆகும். இதற்கு capture phase இல்லை. அதற்கு பதிலாக, onMouseLeave மற்றும் onMouseEnter விட்டு வெளியேறும் element-இலிருந்து நுழையும் element-க்கு propagate ஆகும்.
• onMouseLeave: ஒரு MouseEvent handler function. Pointer ஒரு element-க்கு வெளியே நகரும்போது fire ஆகும். இதற்கு capture phase இல்லை. அதற்கு பதிலாக, onMouseLeave மற்றும் onMouseEnter விட்டு வெளியேறும் element-இலிருந்து நுழையும் element-க்கு propagate ஆகும்.
• onMouseMove: ஒரு MouseEvent handler function. Pointer coordinates மாறும்போது fire ஆகும்.
• onMouseMoveCapture: capture phase-இல் fire ஆகும் onMouseMove-ன் version.
• onMouseOut: ஒரு MouseEvent handler function. Pointer ஒரு element-க்கு வெளியே நகரும்போது, அல்லது child element-க்குள் நகரும்போது fire ஆகும்.
• onMouseOutCapture: capture phase-இல் fire ஆகும் onMouseOut-ன் version.
• onMouseUp: ஒரு MouseEvent handler function. Pointer release செய்யப்படும் போது fire ஆகும்.
• onMouseUpCapture: capture phase-இல் fire ஆகும் onMouseUp-ன் version.
• onPointerCancel: ஒரு PointerEvent handler function. Browser ஒரு pointer interaction-ஐ cancel செய்தால் fire ஆகும்.
• onPointerCancelCapture: capture phase-இல் fire ஆகும் onPointerCancel-ன் version.
• onPointerDown: ஒரு PointerEvent handler function. Pointer active ஆகும்போது fire ஆகும்.
• onPointerDownCapture: capture phase-இல் fire ஆகும் onPointerDown-ன் version.
• onPointerEnter: ஒரு PointerEvent handler function. Pointer ஒரு element-க்குள் நகரும்போது fire ஆகும். இதற்கு capture phase இல்லை. அதற்கு பதிலாக, onPointerLeave மற்றும் onPointerEnter விட்டு வெளியேறும் element-இலிருந்து நுழையும் element-க்கு propagate ஆகும்.
• onPointerLeave: ஒரு PointerEvent handler function. Pointer ஒரு element-க்கு வெளியே நகரும்போது fire ஆகும். இதற்கு capture phase இல்லை. அதற்கு பதிலாக, onPointerLeave மற்றும் onPointerEnter விட்டு வெளியேறும் element-இலிருந்து நுழையும் element-க்கு propagate ஆகும்.
• onPointerMove: ஒரு PointerEvent handler function. Pointer coordinates மாறும்போது fire ஆகும்.
• onPointerMoveCapture: capture phase-இல் fire ஆகும் onPointerMove-ன் version.
• onPointerOut: ஒரு PointerEvent handler function. Pointer ஒரு element-க்கு வெளியே நகரும்போது, pointer interaction cancel செய்யப்பட்டால், மற்றும் சில பிற காரணங்களால் fire ஆகும்.
• onPointerOutCapture: capture phase-இல் fire ஆகும் onPointerOut-ன் version.
• onPointerUp: ஒரு PointerEvent handler function. Pointer இனி active இல்லாதபோது fire ஆகும்.
• onPointerUpCapture: capture phase-இல் fire ஆகும் onPointerUp-ன் version.
• onPaste: ஒரு ClipboardEvent handler function. User clipboard-இலிருந்து ஏதாவது paste செய்ய முயன்றால் fire ஆகும்.
• onPasteCapture: capture phase-இல் fire ஆகும் onPaste-ன் version.
• onScroll: ஒரு Event handler function. Element scroll செய்யப்பட்டபோது fire ஆகும். இந்த event bubble ஆகாது.
• onScrollCapture: capture phase-இல் fire ஆகும் onScroll-ன் version.
• onSelect: ஒரு Event handler function. Input போன்ற editable element-க்குள் selection மாறிய பிறகு fire ஆகும். contentEditable={true} elements-க்கும் வேலை செய்ய React onSelect event-ஐ விரிவாக்குகிறது. கூடுதலாக, empty selection-க்கும் edits-க்கும் (அவை selection-ஐ பாதிக்கலாம்) fire ஆகும்படி React இதை விரிவாக்குகிறது.
• onSelectCapture: capture phase-இல் fire ஆகும் onSelect-ன் version.
• onTouchCancel: ஒரு TouchEvent handler function. Browser ஒரு touch interaction-ஐ cancel செய்தால் fire ஆகும்.
• onTouchCancelCapture: capture phase-இல் fire ஆகும் onTouchCancel-ன் version.
• onTouchEnd: ஒரு TouchEvent handler function. ஒன்று அல்லது அதற்கு மேற்பட்ட touch points அகற்றப்பட்டால் fire ஆகும்.
• onTouchEndCapture: capture phase-இல் fire ஆகும் onTouchEnd-ன் version.
• onTouchMove: ஒரு TouchEvent handler function. ஒன்று அல்லது அதற்கு மேற்பட்ட touch points நகர்த்தப்பட்டால் fire ஆகும்.
• onTouchMoveCapture: capture phase-இல் fire ஆகும் onTouchMove-ன் version.
• onTouchStart: ஒரு TouchEvent handler function. ஒன்று அல்லது அதற்கு மேற்பட்ட touch points வைக்கப்படும்போது fire ஆகும்.
• onTouchStartCapture: capture phase-இல் fire ஆகும் onTouchStart-ன் version.
• onTransitionEnd: ஒரு TransitionEvent handler function. CSS transition முடிந்தபோது fire ஆகும்.
• onTransitionEndCapture: capture phase-இல் fire ஆகும் onTransitionEnd-ன் version.
• onWheel: ஒரு WheelEvent handler function. User wheel button-ஐ rotate செய்யும்போது fire ஆகும்.
• onWheelCapture: capture phase-இல் fire ஆகும் onWheel-ன் version.
• role: ஒரு string. Assistive technologies-க்காக element role-ஐ வெளிப்படையாக குறிப்பிடுகிறது.
• slot: ஒரு string. Shadow DOM பயன்படுத்தும்போது slot name-ஐ குறிப்பிடுகிறது. React-இல் இதற்கு இணையான pattern பொதுவாக JSX-ஐ props ஆக pass செய்வதன் மூலம் பெறப்படுகிறது, உதாரணமாக <Layout left={<Sidebar />} right={<Content />} />.
• spellCheck: ஒரு boolean அல்லது null. Explicit ஆக true அல்லது false set செய்தால், spellchecking enable அல்லது disable ஆகும்.
• tabIndex: ஒரு number. Default Tab button behavior-ஐ override செய்கிறது. -1 மற்றும் 0 அல்லாத values பயன்படுத்துவதை தவிர்க்கவும்.
• title: ஒரு string. Element-க்கான tooltip text-ஐ குறிப்பிடுகிறது.
• translate: 'yes' அல்லது 'no'. 'no' pass செய்தால் element content translate செய்யப்படுவதிலிருந்து விலக்கப்படும்.

Custom attributes-ஐயும் props ஆக pass செய்யலாம், உதாரணமாக mycustomprop="someValue". Third-party libraries-உடன் integrate செய்யும்போது இது பயனுள்ளதாக இருக்கலாம். Custom attribute பெயர் lowercase ஆக இருக்க வேண்டும்; on என்று தொடங்கக்கூடாது. Value string ஆக மாற்றப்படும். null அல்லது undefined pass செய்தால், custom attribute நீக்கப்படும்.

இந்த events <form> elements-க்கு மட்டும் fire ஆகும்:

• onReset: ஒரு Event handler function. Form reset செய்யப்படும் போது fire ஆகும்.
• onResetCapture: capture phase-இல் fire ஆகும் onReset-ன் version.
• onSubmit: ஒரு Event handler function. Form submit செய்யப்படும் போது fire ஆகும்.
• onSubmitCapture: capture phase-இல் fire ஆகும் onSubmit-ன் version.

இந்த events <dialog> elements-க்கு மட்டும் fire ஆகும். Browser events போல அல்லாமல், React-இல் இவை bubble ஆகும்:

• onCancel: ஒரு Event handler function. User dialog-ஐ dismiss செய்ய முயன்றால் fire ஆகும்.
• onCancelCapture: capture phase-இல் fire ஆகும் onCancel-ன் version.
• onClose: ஒரு Event handler function. Dialog close செய்யப்பட்டபோது fire ஆகும்.
• onCloseCapture: capture phase-இல் fire ஆகும் onClose-ன் version.

இந்த events <details> elements-க்கு மட்டும் fire ஆகும். Browser events போல அல்லாமல், React-இல் இவை bubble ஆகும்:

• onToggle: ஒரு Event handler function. User details-ஐ toggle செய்யும்போது fire ஆகும்.
• onToggleCapture: capture phase-இல் fire ஆகும் onToggle-ன் version.

இந்த events <img>, <iframe>, <object>, <embed>, <link>, மற்றும் SVG <image> elements-க்கு fire ஆகும். Browser events போல அல்லாமல், React-இல் இவை bubble ஆகும்:

• onLoad: ஒரு Event handler function. Resource load ஆனபோது fire ஆகும்.
• onLoadCapture: capture phase-இல் fire ஆகும் onLoad-ன் version.
• onError: ஒரு Event handler function. Resource load ஆக முடியாதபோது fire ஆகும்.
• onErrorCapture: capture phase-இல் fire ஆகும் onError-ன் version.

இந்த events <audio> மற்றும் <video> போன்ற resources-க்கு fire ஆகும். Browser events போல அல்லாமல், React-இல் இவை bubble ஆகும்:

• onAbort: ஒரு Event handler function. Resource முழுமையாக load ஆகாதபோது, ஆனால் error காரணமாக அல்லாதபோது fire ஆகும்.
• onAbortCapture: capture phase-இல் fire ஆகும் onAbort-ன் version.
• onCanPlay: ஒரு Event handler function. Play தொடங்க போதுமான data இருக்கும்போது, ஆனால் buffering இல்லாமல் முடிவு வரை play செய்ய போதுமானதாக இல்லாதபோது fire ஆகும்.
• onCanPlayCapture: capture phase-இல் fire ஆகும் onCanPlay-ன் version.
• onCanPlayThrough: ஒரு Event handler function. முடிவு வரை buffering இல்லாமல் play செய்ய போதுமான data இருக்கக்கூடும் என்ற நிலையில் fire ஆகும்.
• onCanPlayThroughCapture: capture phase-இல் fire ஆகும் onCanPlayThrough-ன் version.
• onDurationChange: ஒரு Event handler function. Media duration update ஆனபோது fire ஆகும்.
• onDurationChangeCapture: capture phase-இல் fire ஆகும் onDurationChange-ன் version.
• onEmptied: ஒரு Event handler function. Media empty ஆனபோது fire ஆகும்.
• onEmptiedCapture: capture phase-இல் fire ஆகும் onEmptied-ன் version.
• onEncrypted: ஒரு Event handler function. Browser encrypted media-வை சந்திக்கும் போது fire ஆகும்.
• onEncryptedCapture: capture phase-இல் fire ஆகும் onEncrypted-ன் version.
• onEnded: ஒரு Event handler function. Play செய்ய எதுவும் மீதமில்லாததால் playback நிற்கும்போது fire ஆகும்.
• onEndedCapture: capture phase-இல் fire ஆகும் onEnded-ன் version.
• onError: ஒரு Event handler function. Resource load ஆக முடியாதபோது fire ஆகும்.
• onErrorCapture: capture phase-இல் fire ஆகும் onError-ன் version.
• onLoadedData: ஒரு Event handler function. தற்போதைய playback frame load ஆனபோது fire ஆகும்.
• onLoadedDataCapture: capture phase-இல் fire ஆகும் onLoadedData-ன் version.
• onLoadedMetadata: ஒரு Event handler function. Metadata load ஆனபோது fire ஆகும்.
• onLoadedMetadataCapture: capture phase-இல் fire ஆகும் onLoadedMetadata-ன் version.
• onLoadStart: ஒரு Event handler function. Browser resource-ஐ load செய்யத் தொடங்கும்போது fire ஆகும்.
• onLoadStartCapture: capture phase-இல் fire ஆகும் onLoadStart-ன் version.
• onPause: ஒரு Event handler function. Media pause செய்யப்பட்டபோது fire ஆகும்.
• onPauseCapture: capture phase-இல் fire ஆகும் onPause-ன் version.
• onPlay: ஒரு Event handler function. Media இனி paused இல்லாதபோது fire ஆகும்.
• onPlayCapture: capture phase-இல் fire ஆகும் onPlay-ன் version.
• onPlaying: ஒரு Event handler function. Media play செய்யத் தொடங்கும்போது அல்லது மீண்டும் தொடங்கும்போது fire ஆகும்.
• onPlayingCapture: capture phase-இல் fire ஆகும் onPlaying-ன் version.
• onProgress: ஒரு Event handler function. Resource load ஆகிக்கொண்டிருக்கும் போது அவ்வப்போது fire ஆகும்.
• onProgressCapture: capture phase-இல் fire ஆகும் onProgress-ன் version.
• onRateChange: ஒரு Event handler function. Playback rate மாறும்போது fire ஆகும்.
• onRateChangeCapture: capture phase-இல் fire ஆகும் onRateChange-ன் version.
• onResize: ஒரு Event handler function. Video size மாறும்போது fire ஆகும்.
• onResizeCapture: capture phase-இல் fire ஆகும் onResize-ன் version.
• onSeeked: ஒரு Event handler function. Seek operation முடிந்தபோது fire ஆகும்.
• onSeekedCapture: capture phase-இல் fire ஆகும் onSeeked-ன் version.
• onSeeking: ஒரு Event handler function. Seek operation தொடங்கும்போது fire ஆகும்.
• onSeekingCapture: capture phase-இல் fire ஆகும் onSeeking-ன் version.
• onStalled: ஒரு Event handler function. Browser data-க்காக காத்திருக்கும்போது ஆனால் அது தொடர்ந்து load ஆகாதபோது fire ஆகும்.
• onStalledCapture: capture phase-இல் fire ஆகும் onStalled-ன் version.
• onSuspend: ஒரு Event handler function. Resource loading suspend செய்யப்பட்டபோது fire ஆகும்.
• onSuspendCapture: capture phase-இல் fire ஆகும் onSuspend-ன் version.
• onTimeUpdate: ஒரு Event handler function. தற்போதைய playback time update ஆனபோது fire ஆகும்.
• onTimeUpdateCapture: capture phase-இல் fire ஆகும் onTimeUpdate-ன் version.
• onVolumeChange: ஒரு Event handler function. Volume மாறியபோது fire ஆகும்.
• onVolumeChangeCapture: capture phase-இல் fire ஆகும் onVolumeChange-ன் version.
• onWaiting: ஒரு Event handler function. Temporary data இல்லாமையால் playback நிற்கும்போது fire ஆகும்.
• onWaitingCapture: capture phase-இல் fire ஆகும் onWaiting-ன் version.

Caveats

• children மற்றும் dangerouslySetInnerHTML இரண்டையும் ஒரே நேரத்தில் pass செய்ய முடியாது.
• சில events (onAbort மற்றும் onLoad போன்றவை) browser-இல் bubble ஆகாது, ஆனால் React-இல் bubble ஆகும்.

ref callback function

Ref object-க்கு பதிலாக (useRef return செய்யும் object போன்றது), ref attribute-க்கு function pass செய்யலாம்.

<div ref={(node) => {
  console.log('இணைக்கப்பட்டது', node);

  return () => {
    console.log('சுத்தம் செய்யவும்', node)
  }
}}>

ref callback பயன்படுத்தும் உதாரணத்தை பார்க்கவும்.

<div> DOM node screen-க்கு சேர்க்கப்படும் போது, DOM node-ஐ argument ஆக வைத்து React உங்கள் ref callback-ஐ call செய்யும். அந்த <div> DOM node நீக்கப்படும் போது, callback return செய்த cleanup function-ஐ React call செய்யும்.

நீங்கள் வேறு ref callback pass செய்யும் ஒவ்வொரு முறையும் React உங்கள் ref callback-ஐ call செய்யும். மேலுள்ள உதாரணத்தில், (node) => { ... } ஒவ்வொரு render-இலும் வேறு function ஆகும். உங்கள் component re-render ஆகும்போது, முந்தைய function null argument-உடன் call செய்யப்படும்; அடுத்த function DOM node-உடன் call செய்யப்படும்.

Parameters

• node: ஒரு DOM node. Ref attach ஆகும்போது React DOM node-ஐ உங்களுக்கு pass செய்யும். ஒவ்வொரு render-இலும் ref callback-க்காக அதே function reference-ஐ pass செய்யாவிட்டால், component re-render ஆகும் ஒவ்வொரு முறையும் callback தற்காலிகமாக cleanup செய்யப்பட்டு மீண்டும் உருவாக்கப்படும்.

Returns

• optional cleanup function: ref detach ஆகும்போது React cleanup function-ஐ call செய்யும். ref callback ஒரு function return செய்யாவிட்டால், ref detach ஆகும் போது React callback-ஐ மீண்டும் null argument-உடன் call செய்யும். இந்த behavior எதிர்கால version-இல் நீக்கப்படும்.

Caveats

• Strict Mode on ஆக இருந்தால், முதல் real setup-க்கு முன் React development-க்கு மட்டும் கூடுதல் setup+cleanup cycle ஒன்றை run செய்யும். உங்கள் cleanup logic setup logic-ஐ “mirror” செய்கிறதா, setup செய்கிறதை நிறுத்துகிறதா அல்லது undo செய்கிறதா என்பதை உறுதி செய்யும் stress-test இது. இது பிரச்சினை தருமானால், cleanup function-ஐ implement செய்யுங்கள்.
• நீங்கள் வேறு ref callback pass செய்தால், React முந்தைய callback-ன் cleanup function-ஐ call செய்யும். Cleanup function define செய்யப்படவில்லை என்றால், ref callback null argument-உடன் call செய்யப்படும். அடுத்த function DOM node-உடன் call செய்யப்படும்.

React event object

உங்கள் event handlers ஒரு React event object-ஐப் பெறும். இது சில நேரங்களில் “synthetic event” என்றும் அழைக்கப்படுகிறது.

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

இது underlying DOM events போலவே அதே standard-ஐ பின்பற்றுகிறது, ஆனால் சில browser inconsistencies-ஐ சரிசெய்கிறது.

சில React events browser-ன் native events-க்கு நேரடியாக map ஆகாது. உதாரணமாக onMouseLeave-இல், e.nativeEvent ஒரு mouseout event-ஐ point செய்யும். இந்த specific mapping public API-ன் பகுதி அல்ல; எதிர்காலத்தில் மாறலாம். ஏதாவது காரணத்திற்காக underlying browser event தேவைப்பட்டால், அதை e.nativeEvent-இலிருந்து வாசிக்கவும்.

Properties

React event objects சில standard Event properties-ஐ implement செய்கின்றன:

• bubbles: ஒரு boolean. Event DOM வழியாக bubble ஆகுமா என்பதை return செய்கிறது.
• cancelable: ஒரு boolean. Event cancel செய்ய முடியுமா என்பதை return செய்கிறது.
• currentTarget: ஒரு DOM node. React tree-இல் current handler attach செய்யப்பட்ட node-ஐ return செய்கிறது.
• defaultPrevented: ஒரு boolean. preventDefault call செய்யப்பட்டதா என்பதை return செய்கிறது.
• eventPhase: ஒரு number. Event தற்போது எந்த phase-இல் உள்ளது என்பதை return செய்கிறது.
• isTrusted: ஒரு boolean. Event user மூலம் தொடங்கப்பட்டதா என்பதை return செய்கிறது.
• target: ஒரு DOM node. Event நிகழ்ந்த node-ஐ return செய்கிறது (அது தூரத்தில் உள்ள child ஆக இருக்கலாம்).
• timeStamp: ஒரு number. Event நிகழ்ந்த நேரத்தை return செய்கிறது.

கூடுதலாக, React event objects இந்த properties-ஐ வழங்குகின்றன:

• nativeEvent: ஒரு DOM Event. Original browser event object.

Methods

React event objects சில standard Event methods-ஐ implement செய்கின்றன:

• preventDefault(): Event-க்கான default browser action-ஐத் தடுக்கிறது.
• stopPropagation(): React tree வழியாக event propagation-ஐ நிறுத்துகிறது.

கூடுதலாக, React event objects இந்த methods-ஐ வழங்குகின்றன:

• isDefaultPrevented(): preventDefault call செய்யப்பட்டதா என்பதை காட்டும் boolean value-ஐ return செய்கிறது.
• isPropagationStopped(): stopPropagation call செய்யப்பட்டதா என்பதை காட்டும் boolean value-ஐ return செய்கிறது.
• persist(): React DOM உடன் பயன்படுத்தப்படாது. React Native-இல், event பிறகு event-ன் properties-ஐ வாசிக்க இதை call செய்யுங்கள்.
• isPersistent(): React DOM உடன் பயன்படுத்தப்படாது. React Native-இல், persist call செய்யப்பட்டதா என்பதை return செய்கிறது.

Caveats

• currentTarget, eventPhase, target, மற்றும் type values உங்கள் React code எதிர்பார்க்கும் values-ஐ reflect செய்கின்றன. Internally, React event handlers-ஐ root-இல் attach செய்கிறது, ஆனால் இது React event objects-இல் reflect ஆகாது. உதாரணமாக, e.currentTarget underlying e.nativeEvent.currentTarget-ஐப் போல இருக்க வேண்டியதில்லை. Polyfilled events-க்கு, e.type (React event type) e.nativeEvent.type (underlying type)-இலிருந்து மாறுபடலாம்.

AnimationEvent handler function

CSS animation events-க்கான event handler type.

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

Parameters

• e: இந்த கூடுதல் AnimationEvent properties கொண்ட React event object:
  • animationName
  • elapsedTime
  • pseudoElement

ClipboardEvent handler function

Clipboard API events-க்கான event handler type.

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

Parameters

• e: இந்த கூடுதல் ClipboardEvent properties கொண்ட React event object:

  • clipboardData

CompositionEvent handler function

Input method editor (IME) events-க்கான event handler type.

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

Parameters

• e: இந்த கூடுதல் CompositionEvent properties கொண்ட React event object:
  • data

DragEvent handler function

HTML Drag and Drop API events-க்கான event handler type.

<>
  <div
    draggable={true}
    onDragStart={e => console.log('onDragStart')}
    onDragEnd={e => console.log('onDragEnd')}
  >
    இழுக்கும் மூலம்
  </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 இலக்கு
  </div>
</>

Parameters

• e: இந்த கூடுதல் DragEvent properties கொண்ட React event object:

  • dataTransfer

  இதில் inherited MouseEvent properties-உம் அடங்கும்:

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

  இதில் inherited UIEvent properties-உம் அடங்கும்:

  • detail
  • view

FocusEvent handler function

Focus events-க்கான event handler type.

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

ஒரு example-ஐ பார்க்கவும்.

Parameters

• e: இந்த கூடுதல் FocusEvent properties கொண்ட React event object:

  • relatedTarget

  இதில் inherited UIEvent properties-உம் அடங்கும்:

  • detail
  • view

Event handler function

Generic events-க்கான event handler type.

Parameters

• e: கூடுதல் properties இல்லாத React event object.

InputEvent handler function

onBeforeInput event-க்கான event handler type.

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

Parameters

• e: இந்த கூடுதல் InputEvent properties கொண்ட React event object:
  • data

KeyboardEvent handler function

Keyboard events-க்கான event handler type.

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

ஒரு example-ஐ பார்க்கவும்.

Parameters

• e: இந்த கூடுதல் KeyboardEvent properties கொண்ட React event object:

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

  இதில் inherited UIEvent properties-உம் அடங்கும்:

  • detail
  • view

MouseEvent handler function

Mouse events-க்கான event handler type.

<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')}
/>

ஒரு example-ஐ பார்க்கவும்.

Parameters

• e: இந்த கூடுதல் MouseEvent properties கொண்ட React event object:

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

  இதில் inherited UIEvent properties-உம் அடங்கும்:

  • detail
  • view

PointerEvent handler function

Pointer events-க்கான event handler type.

<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')}
/>

ஒரு example-ஐ பார்க்கவும்.

Parameters

• e: இந்த கூடுதல் PointerEvent properties கொண்ட React event object:

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

  இதில் inherited MouseEvent properties-உம் அடங்கும்:

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

  இதில் inherited UIEvent properties-உம் அடங்கும்:

  • detail
  • view

TouchEvent handler function

Touch events-க்கான event handler type.

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

Parameters

• e: இந்த கூடுதல் TouchEvent properties கொண்ட React event object:

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

  இதில் inherited UIEvent properties-உம் அடங்கும்:

  • detail
  • view

TransitionEvent handler function

CSS transition events-க்கான event handler type.

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

Parameters

• e: இந்த கூடுதல் TransitionEvent properties கொண்ட React event object:
  • elapsedTime
  • propertyName
  • pseudoElement

UIEvent handler function

Generic UI events-க்கான event handler type.

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

Parameters

• e: இந்த கூடுதல் UIEvent properties கொண்ட React event object:
  • detail
  • view

WheelEvent handler function

onWheel event-க்கான event handler type.

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

Parameters

• e: இந்த கூடுதல் WheelEvent properties கொண்ட React event object:

  • deltaMode
  • deltaX
  • deltaY
  • deltaZ

  இதில் inherited MouseEvent properties-உம் அடங்கும்:

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

  இதில் inherited UIEvent properties-உம் அடங்கும்:

  • detail
  • view

Usage

CSS styles பயன்படுத்துதல்

React-இல், CSS class-ஐ className மூலம் குறிப்பிடுகிறீர்கள். இது HTML-இல் உள்ள class attribute போலவே வேலை செய்கிறது:

<img className="avatar" />

பிறகு அதற்கான CSS rules-ஐ தனி CSS file-இல் எழுதுகிறீர்கள்:

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

CSS files-ஐ எப்படி சேர்க்க வேண்டும் என்று React கட்டாயப்படுத்தாது. நேரடியான நிலையில், உங்கள் HTML-க்கு <link> tag ஒன்றை சேர்ப்பீர்கள். Build tool அல்லது framework பயன்படுத்தினால், உங்கள் project-க்கு CSS file சேர்ப்பது எப்படி என்பதை அதன் documentation-ல் பார்க்கவும்.

சில நேரங்களில் style values data-வைப் பொறுத்திருக்கும். சில styles-ஐ dynamic ஆக pass செய்ய style attribute பயன்படுத்துங்கள்:

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

மேலுள்ள உதாரணத்தில், style={{}} என்பது special syntax அல்ல; style={ } JSX curly braces-க்குள் உள்ள வழக்கமான {} object மட்டுமே. உங்கள் styles JavaScript variables-ஐ சார்ந்திருக்கும்போது மட்டும் style attribute பயன்படுத்த பரிந்துரைக்கிறோம்.

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

Ref மூலம் DOM node-ஐ கையாளுதல்

சில நேரங்களில், JSX-இல் உள்ள tag-க்கு தொடர்புடைய browser DOM node-ஐ பெற வேண்டியிருக்கும். உதாரணமாக, button click செய்யும்போது <input> focus ஆக வேண்டும் என்றால், browser <input> DOM node-இல் focus() call செய்ய வேண்டும்.

ஒரு tag-க்கான browser DOM node-ஐ பெற, ref ஒன்றை declare செய்து அதை அந்த tag-க்கு ref attribute ஆக pass செய்யுங்கள்:

import { useRef } from 'react';

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

Screen-க்கு render ஆன பிறகு React DOM node-ஐ inputRef.current-க்குள் வைக்கும்.

Refs மூலம் DOM-ஐ கையாளுவது பற்றி மேலும் வாசிக்கவும், மேலும் இன்னும் பல examples-ஐ பார்க்கவும்.

மேம்பட்ட use cases-க்கு, ref attribute callback function-ஐயும் ஏற்கும்.

Inner HTML-ஐ ஆபத்தான முறையில் set செய்தல்

Raw HTML string-ஐ ஒரு element-க்கு இவ்வாறு pass செய்யலாம்:

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

இது ஆபத்தானது. Underlying DOM innerHTML property போலவே, நீங்கள் மிகுந்த கவனத்துடன் நடக்க வேண்டும்! Markup முற்றிலும் நம்பத்தகுந்த source-இலிருந்து வராத வரை, இவ்வாறு XSS vulnerability உருவாக்குவது சாத்தியம்.

உதாரணமாக, Markdown-ஐ HTML ஆக மாற்றும் Markdown library பயன்படுத்தினால், அதன் parser-இல் bugs இல்லை என்று நீங்கள் நம்பினால், மற்றும் user தன்னுடைய input-ஐ மட்டுமே பார்க்கிறான் என்றால், கிடைக்கும் HTML-ஐ இவ்வாறு காட்டலாம்:

renderMarkdownToHTML function-இல் மேலுள்ள example செய்வது போல, {__html} object HTML உருவாகும் இடத்திற்கு மிக அருகில் create செய்யப்பட வேண்டும். இதனால் உங்கள் code-இல் பயன்படுத்தப்படும் raw HTML அனைத்தும் தெளிவாக அப்படியே mark செய்யப்படும்; மேலும் HTML கொண்டிருக்கும் என்று நீங்கள் எதிர்பார்க்கும் variables மட்டுமே dangerouslySetInnerHTML-க்கு pass செய்யப்படும். <div dangerouslySetInnerHTML={{__html: markup}} /> போல object-ஐ inline ஆக create செய்வது பரிந்துரைக்கப்படாது.

Arbitrary HTML render செய்வது ஏன் ஆபத்தானது என்பதை பார்க்க, மேலுள்ள code-ஐ இதனால் மாற்றுங்கள்:

const post = {
  // Imagine this content is stored in the database.
  content: `<img src="" onerror='alert("நீங்கள் தாக்கப்பட்டுள்ளீர்கள்")'>`
};

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

HTML-இல் embed செய்யப்பட்ட code run ஆகும். ஒரு attacker இந்த security hole-ஐ பயன்படுத்தி user தகவலை திருடலாம் அல்லது அவர்களுக்குப் பதிலாக actions செய்யலாம். நம்பத்தகுந்த மற்றும் sanitized data உடன் மட்டுமே dangerouslySetInnerHTML பயன்படுத்துங்கள்.

Mouse events கையாளுதல்

இந்த example சில பொதுவான mouse events மற்றும் அவை எப்போது fire ஆகின்றன என்பதை காட்டுகிறது.

Pointer events கையாளுதல்

இந்த example சில பொதுவான pointer events மற்றும் அவை எப்போது fire ஆகின்றன என்பதை காட்டுகிறது.

Focus events கையாளுதல்

React-இல், focus events bubble ஆகும். Focusing அல்லது blurring events parent element-க்கு வெளியிலிருந்து தொடங்கியதா என்பதை வேறுபடுத்த currentTarget மற்றும் relatedTarget பயன்படுத்தலாம். Child focus ஆகுதல், parent element focus ஆகுதல், மற்றும் முழு subtree-க்குள் focus நுழைவதையோ வெளியேறுவதையோ detect செய்வது எப்படி என்பதை இந்த example காட்டுகிறது.

Keyboard events கையாளுதல்

இந்த example சில பொதுவான keyboard events மற்றும் அவை எப்போது fire ஆகின்றன என்பதை காட்டுகிறது.