Common components (e.g. <div>)

Tất cả các thành phần trình duyệt tích hợp sẵn, chẳng hạn như <div>, đều hỗ trợ một số props và sự kiện chung.

Tham khảo

Các thành phần chung (ví dụ: `<div>`)

<div className="wrapper">Một số nội dung</div>

Xem thêm các ví dụ bên dưới.

Props

Các React props đặc biệt này được hỗ trợ cho tất cả các thành phần tích hợp sẵn:

children: Một React node (một phần tử, một chuỗi, một số, một portal, một node trống như null, undefined và boolean, hoặc một mảng các React node khác). Chỉ định nội dung bên trong thành phần. Khi bạn sử dụng JSX, bạn thường chỉ định prop children một cách ngầm định bằng cách lồng các thẻ như <div><span /></div>.
dangerouslySetInnerHTML: Một đối tượng có dạng { __html: '<p>some html</p>' } với một chuỗi HTML thô bên trong. Ghi đè thuộc tính innerHTML của DOM node và hiển thị HTML đã truyền bên trong. Điều này nên được sử dụng hết sức thận trọng! Nếu HTML bên trong không đáng tin cậy (ví dụ: nếu nó dựa trên dữ liệu người dùng), bạn có nguy cơ đưa vào lỗ hổng XSS. Đọc thêm về cách sử dụng dangerouslySetInnerHTML.
ref: Một đối tượng ref từ useRef hoặc createRef, hoặc một hàm callback ref, hoặc một chuỗi cho legacy refs. Ref của bạn sẽ được điền vào DOM element cho node này. Đọc thêm về thao tác DOM với ref.
suppressContentEditableWarning: Một boolean. Nếu true, sẽ ngăn chặn cảnh báo mà React hiển thị cho các phần tử vừa có children vừa có contentEditable={true} (thường không hoạt động cùng nhau). Sử dụng điều này nếu bạn đang xây dựng một thư viện nhập văn bản quản lý nội dung contentEditable theo cách thủ công.
suppressHydrationWarning: Một boolean. Nếu bạn sử dụng server rendering, thông thường sẽ có một cảnh báo khi server và client hiển thị nội dung khác nhau. Trong một số trường hợp hiếm hoi (như dấu thời gian), rất khó hoặc không thể đảm bảo sự khớp chính xác. Nếu bạn đặt suppressHydrationWarning thành true, React sẽ không cảnh báo bạn về sự không khớp trong các thuộc tính và nội dung của phần tử đó. Nó chỉ hoạt động ở một cấp độ sâu và được dự định sử dụng như một lối thoát hiểm. Không nên lạm dụng nó. Đọc về cách ngăn chặn các lỗi không khớp hydration không thể tránh khỏi.
style: Một đối tượng với các kiểu CSS, ví dụ: { fontWeight: 'bold', margin: 20 }. Tương tự như thuộc tính style của DOM, tên thuộc tính CSS cần được viết dưới dạng camelCase, ví dụ: fontWeight thay vì font-weight. Bạn có thể truyền chuỗi hoặc số làm giá trị. Nếu bạn truyền một số, như width: 100, React sẽ tự động thêm px (“pixel”) vào giá trị trừ khi đó là một unitless property. Chúng tôi khuyên bạn chỉ nên sử dụng style cho các kiểu động, nơi bạn không biết trước các giá trị kiểu. Trong các trường hợp khác, việc áp dụng các lớp CSS đơn giản với className sẽ hiệu quả hơn. Đọc thêm về className và style.

Các DOM props tiêu chuẩn này cũng được hỗ trợ cho tất cả các thành phần tích hợp sẵn:

accessKey: Một chuỗi. Chỉ định một phím tắt cho phần tử. Không được khuyến nghị chung.
aria-*: Các thuộc tính ARIA cho phép bạn chỉ định thông tin cây trợ năng cho phần tử này. Xem ARIA attributes để có tài liệu tham khảo đầy đủ. Trong React, tất cả các tên thuộc tính ARIA đều giống hệt như trong HTML.
autoCapitalize: Một chuỗi. Chỉ định xem và cách nhập liệu của người dùng nên được viết hoa.
className: Một chuỗi. Chỉ định tên lớp CSS của phần tử. Đọc thêm về cách áp dụng các kiểu CSS.
contentEditable: Một boolean. Nếu true, trình duyệt cho phép người dùng chỉnh sửa trực tiếp phần tử được hiển thị. Điều này được sử dụng để triển khai các thư viện nhập văn bản đa dạng thức như Lexical. React cảnh báo nếu bạn cố gắng truyền React children cho một phần tử có contentEditable={true} vì React sẽ không thể cập nhật nội dung của nó sau khi người dùng chỉnh sửa.
data-*: Các thuộc tính dữ liệu cho phép bạn đính kèm một số dữ liệu chuỗi vào phần tử, ví dụ: data-fruit="banana". Trong React, chúng không được sử dụng phổ biến vì bạn thường sẽ đọc dữ liệu từ props hoặc state thay thế.
dir: Hoặc 'ltr' hoặc 'rtl'. Chỉ định hướng văn bản của phần tử.
draggable: Một boolean. Chỉ định xem phần tử có thể kéo được hay không. Một phần của HTML Drag and Drop API.
enterKeyHint: Một chuỗi. Chỉ định hành động nào sẽ hiển thị cho phím enter trên bàn phím ảo.
htmlFor: Một chuỗi. Đối với <label> và <output>, cho phép bạn liên kết nhãn với một số điều khiển. Tương tự như thuộc tính HTML for. React sử dụng tên thuộc tính DOM tiêu chuẩn (htmlFor) thay vì tên thuộc tính HTML.
hidden: Một boolean hoặc một chuỗi. Chỉ định xem phần tử có nên bị ẩn hay không.
id: Một chuỗi. Chỉ định một mã định danh duy nhất cho phần tử này, có thể được sử dụng để tìm nó sau này hoặc kết nối nó với các phần tử khác. Tạo nó bằng useId để tránh xung đột giữa nhiều phiên bản của cùng một thành phần.
is: Một chuỗi. Nếu được chỉ định, thành phần sẽ hoạt động như một custom element.
inputMode: Một chuỗi. Chỉ định loại bàn phím nào sẽ hiển thị (ví dụ: văn bản, số hoặc điện thoại).
itemProp: Một chuỗi. Chỉ định thuộc tính nào phần tử đại diện cho trình thu thập dữ liệu có cấu trúc.
lang: Một chuỗi. Chỉ định ngôn ngữ của phần tử.
onAnimationEnd: Một hàm xử lý AnimationEvent. Kích hoạt khi một CSS animation hoàn thành.
onAnimationEndCapture: Một phiên bản của onAnimationEnd kích hoạt trong giai đoạn capture.
onAnimationIteration: Một hàm xử lý AnimationEvent. Kích hoạt khi một vòng lặp của CSS animation kết thúc và một vòng lặp khác bắt đầu.
onAnimationIterationCapture: Một phiên bản của onAnimationIteration kích hoạt trong giai đoạn capture.
onAnimationStart: Một hàm xử lý AnimationEvent. Kích hoạt khi một CSS animation bắt đầu.
onAnimationStartCapture: onAnimationStart, nhưng kích hoạt trong giai đoạn capture.
onAuxClick: Một hàm xử lý MouseEvent. Kích hoạt khi một nút con trỏ không phải là nút chính được nhấp.
onAuxClickCapture: Một phiên bản của onAuxClick kích hoạt trong giai đoạn capture.
onBeforeInput: Một hàm xử lý InputEvent. Kích hoạt trước khi giá trị của một phần tử có thể chỉnh sửa được sửa đổi. React chưa sử dụng sự kiện beforeinput gốc và thay vào đó cố gắng polyfill nó bằng các sự kiện khác.
onBeforeInputCapture: Một phiên bản của onBeforeInput kích hoạt trong giai đoạn capture.
onBlur: Một hàm xử lý FocusEvent. Kích hoạt khi một phần tử mất focus. Không giống như sự kiện blur của trình duyệt tích hợp, trong React, sự kiện onBlur nổi lên.
onBlurCapture: Một phiên bản của onBlur kích hoạt trong giai đoạn capture.
onClick: Một hàm xử lý MouseEvent. Kích hoạt khi nút chính được nhấp trên thiết bị trỏ.
onClickCapture: Một phiên bản của onClick kích hoạt trong giai đoạn capture.
onCompositionStart: Một hàm xử lý CompositionEvent. Kích hoạt khi một input method editor bắt đầu một phiên soạn thảo mới.
onCompositionStartCapture: Một phiên bản của onCompositionStart kích hoạt trong giai đoạn capture.
onCompositionEnd: Một hàm xử lý CompositionEvent. Kích hoạt khi một input method editor hoàn thành hoặc hủy một phiên soạn thảo.
onCompositionEndCapture: Một phiên bản của onCompositionEnd kích hoạt trong giai đoạn capture.
onCompositionUpdate: Một hàm xử lý CompositionEvent. Kích hoạt khi một input method editor nhận được một ký tự mới.
onCompositionUpdateCapture: Một phiên bản của onCompositionUpdate kích hoạt trong giai đoạn capture.
onContextMenu: Một hàm xử lý MouseEvent. Kích hoạt khi người dùng cố gắng mở một context menu.
onContextMenuCapture: Một phiên bản của onContextMenu kích hoạt trong giai đoạn capture.
onCopy: Một hàm xử lý ClipboardEvent. Kích hoạt khi người dùng cố gắng sao chép một cái gì đó vào clipboard.
onCopyCapture: Một phiên bản của onCopy kích hoạt trong giai đoạn capture.
onCut: Một hàm xử lý ClipboardEvent. Kích hoạt khi người dùng cố gắng cắt một cái gì đó vào clipboard.
onCutCapture: Một phiên bản của onCut kích hoạt trong giai đoạn capture.
onDoubleClick: Một hàm xử lý MouseEvent. Kích hoạt khi người dùng nhấp đúp. Tương ứng với sự kiện dblclick của trình duyệt.
onDoubleClickCapture: Một phiên bản của onDoubleClick kích hoạt trong giai đoạn capture.
onDrag: Một hàm xử lý DragEvent. Kích hoạt khi người dùng đang kéo một cái gì đó.
onDragCapture: Một phiên bản của onDrag kích hoạt trong giai đoạn capture.
onDragEnd: Một hàm xử lý DragEvent. Kích hoạt khi người dùng ngừng kéo một cái gì đó.
onDragEndCapture: Một phiên bản của onDragEnd kích hoạt trong giai đoạn capture.
onDragEnter: Một hàm xử lý DragEvent. Kích hoạt khi nội dung được kéo vào một mục tiêu thả hợp lệ.
onDragEnterCapture: Một phiên bản của onDragEnter kích hoạt trong giai đoạn capture.
onDragOver: Một hàm xử lý DragEvent. Kích hoạt trên một mục tiêu thả hợp lệ trong khi nội dung được kéo đang được kéo qua nó. Bạn phải gọi e.preventDefault() ở đây để cho phép thả.
onDragOverCapture: Một phiên bản của onDragOver kích hoạt trong giai đoạn capture.
onDragStart: Một hàm xử lý DragEvent. Kích hoạt khi người dùng bắt đầu kéo một phần tử.
onDragStartCapture: Một phiên bản của onDragStart kích hoạt trong giai đoạn capture.
onDrop: Một hàm xử lý DragEvent. Kích hoạt khi một cái gì đó được thả trên một mục tiêu thả hợp lệ.
onDropCapture: Một phiên bản của onDrop kích hoạt trong giai đoạn capture.
onFocus: Một hàm xử lý FocusEvent. Kích hoạt khi một phần tử nhận được focus. Không giống như sự kiện focus của trình duyệt tích hợp, trong React, sự kiện onFocus nổi lên.
onFocusCapture: Một phiên bản của onFocus kích hoạt trong giai đoạn capture.
onGotPointerCapture: Một hàm xử lý PointerEvent. Kích hoạt khi một phần tử chụp một con trỏ theo chương trình.
onGotPointerCaptureCapture: Một phiên bản của onGotPointerCapture kích hoạt trong giai đoạn capture.
onKeyDown: Một hàm xử lý KeyboardEvent. Kích hoạt khi một phím được nhấn.
onKeyDownCapture: Một phiên bản của onKeyDown kích hoạt trong giai đoạn capture.
onKeyPress: Một hàm xử lý KeyboardEvent. Đã không còn được dùng. Sử dụng onKeyDown hoặc onBeforeInput thay thế.
onKeyPressCapture: Một phiên bản của onKeyPress kích hoạt trong giai đoạn capture.
onKeyUp: Một hàm xử lý KeyboardEvent. Kích hoạt khi một phím được nhả ra.
onKeyUpCapture: Một phiên bản của onKeyUp kích hoạt trong giai đoạn capture.
onLostPointerCapture: Một hàm xử lý PointerEvent. Kích hoạt khi một phần tử ngừng chụp một con trỏ.
onLostPointerCaptureCapture: Một phiên bản của onLostPointerCapture kích hoạt trong giai đoạn capture.
onMouseDown: Một hàm xử lý MouseEvent. Kích hoạt khi con trỏ được nhấn xuống.
onMouseDownCapture: Một phiên bản của onMouseDown kích hoạt trong giai đoạn capture.
onMouseEnter: Một hàm xử lý MouseEvent. Kích hoạt khi con trỏ di chuyển vào bên trong một phần tử. Không có giai đoạn capture. Thay vào đó, onMouseLeave và onMouseEnter lan truyền từ phần tử bị rời đi đến phần tử được nhập vào.
onMouseLeave: Một hàm xử lý MouseEvent. Kích hoạt khi con trỏ di chuyển ra bên ngoài một phần tử. Không có giai đoạn capture. Thay vào đó, onMouseLeave và onMouseEnter lan truyền từ phần tử bị rời đi đến phần tử được nhập vào.
onMouseMove: Một hàm xử lý MouseEvent. Kích hoạt khi con trỏ thay đổi tọa độ.
onMouseMoveCapture: Một phiên bản của onMouseMove kích hoạt trong giai đoạn capture.
onMouseOut: Một hàm xử lý MouseEvent. Kích hoạt khi con trỏ di chuyển ra bên ngoài một phần tử hoặc nếu nó di chuyển vào một phần tử con.
onMouseOutCapture: Một phiên bản của onMouseOut kích hoạt trong giai đoạn capture.
onMouseUp: Một hàm xử lý MouseEvent. Kích hoạt khi con trỏ được nhả ra.
onMouseUpCapture: Một phiên bản của onMouseUp kích hoạt trong giai đoạn capture.
onPointerCancel: Một hàm xử lý PointerEvent. Kích hoạt khi trình duyệt hủy một tương tác con trỏ.
onPointerCancelCapture: Một phiên bản của onPointerCancel kích hoạt trong giai đoạn capture.
onPointerDown: Một hàm xử lý PointerEvent. Kích hoạt khi một con trỏ trở nên hoạt động.
onPointerDownCapture: Một phiên bản của onPointerDown kích hoạt trong giai đoạn capture.
onPointerEnter: Một hàm xử lý PointerEvent. Kích hoạt khi một con trỏ di chuyển vào bên trong một phần tử. Không có giai đoạn capture. Thay vào đó, onPointerLeave và onPointerEnter lan truyền từ phần tử bị rời đi đến phần tử được nhập vào.
onPointerLeave: Một hàm xử lý PointerEvent. Kích hoạt khi một con trỏ di chuyển ra bên ngoài một phần tử. Không có giai đoạn capture. Thay vào đó, onPointerLeave và onPointerEnter lan truyền từ phần tử bị rời đi đến phần tử được nhập vào.
onPointerMove: Một hàm xử lý PointerEvent. Kích hoạt khi một con trỏ thay đổi tọa độ.
onPointerMoveCapture: Một phiên bản của onPointerMove kích hoạt trong giai đoạn capture.
onPointerOut: Một hàm xử lý PointerEvent. Kích hoạt khi một con trỏ di chuyển ra bên ngoài một phần tử, nếu tương tác con trỏ bị hủy và một vài lý do khác.
onPointerOutCapture: Một phiên bản của onPointerOut kích hoạt trong giai đoạn capture.
onPointerUp: Một hàm xử lý PointerEvent. Kích hoạt khi một con trỏ không còn hoạt động.
onPointerUpCapture: Một phiên bản của onPointerUp kích hoạt trong giai đoạn capture.
onPaste: Một hàm xử lý ClipboardEvent. Kích hoạt khi người dùng cố gắng dán một cái gì đó từ clipboard.
onPasteCapture: Một phiên bản của onPaste kích hoạt trong giai đoạn capture.
onScroll: Một hàm xử lý Event. Kích hoạt khi một phần tử đã được cuộn. Sự kiện này không nổi lên.
onScrollCapture: Một phiên bản của onScroll kích hoạt trong giai đoạn capture.
onSelect: Một hàm xử lý Event. Kích hoạt sau khi lựa chọn bên trong một phần tử có thể chỉnh sửa như một input thay đổi. React mở rộng sự kiện onSelect để hoạt động cho các phần tử contentEditable={true}. Ngoài ra, React mở rộng nó để kích hoạt cho lựa chọn trống và khi chỉnh sửa (có thể ảnh hưởng đến lựa chọn).
onSelectCapture: Một phiên bản của onSelect kích hoạt trong giai đoạn capture.
onTouchCancel: Một hàm xử lý TouchEvent. Kích hoạt khi trình duyệt hủy một tương tác chạm.
onTouchCancelCapture: Một phiên bản của onTouchCancel kích hoạt trong giai đoạn capture.
onTouchEnd: Một hàm xử lý TouchEvent. Kích hoạt khi một hoặc nhiều điểm chạm bị xóa.
onTouchEndCapture: Một phiên bản của onTouchEnd kích hoạt trong giai đoạn capture.
onTouchMove: Một hàm xử lý TouchEvent. Kích hoạt khi một hoặc nhiều điểm chạm được di chuyển.
onTouchMoveCapture: Một phiên bản của onTouchMove kích hoạt trong giai đoạn capture.
onTouchStart: Một hàm xử lý TouchEvent. Kích hoạt khi một hoặc nhiều điểm chạm được đặt.
onTouchStartCapture: Một phiên bản của onTouchStart kích hoạt trong giai đoạn capture.
onTransitionEnd: Một hàm xử lý TransitionEvent. Kích hoạt khi một CSS transition hoàn thành.
onTransitionEndCapture: Một phiên bản của onTransitionEnd kích hoạt trong giai đoạn capture.
onWheel: Một hàm xử lý WheelEvent. Kích hoạt khi người dùng xoay một nút bánh xe.
onWheelCapture: Một phiên bản của onWheel kích hoạt trong giai đoạn capture.
role: Một chuỗi. Chỉ định vai trò của phần tử một cách rõ ràng cho các công nghệ hỗ trợ.
slot: Một chuỗi. Chỉ định tên slot khi sử dụng shadow DOM. Trong React, một mẫu tương đương thường đạt được bằng cách truyền JSX làm props, ví dụ: <Layout left={<Sidebar />} right={<Content />} />.
spellCheck: Một boolean hoặc null. Nếu được đặt rõ ràng thành true hoặc false, sẽ bật hoặc tắt kiểm tra chính tả.
tabIndex: Một số. Ghi đè hành vi nút Tab mặc định. Tránh sử dụng các giá trị khác -1 và 0.
title: Một chuỗi. Chỉ định văn bản tooltip cho phần tử.
translate: Hoặc 'yes' hoặc 'no'. Truyền 'no' loại trừ nội dung phần tử khỏi việc được dịch. Bạn cũng có thể truyền các thuộc tính tùy chỉnh dưới dạng props, ví dụ: mycustomprop="someValue". Điều này có thể hữu ích khi tích hợp với các thư viện của bên thứ ba. Tên thuộc tính tùy chỉnh phải là chữ thường và không được bắt đầu bằng on. Giá trị sẽ được chuyển đổi thành một chuỗi. Nếu bạn truyền null hoặc undefined, thuộc tính tùy chỉnh sẽ bị xóa.

Các sự kiện này chỉ kích hoạt cho các phần tử <form>:

onReset: Một hàm xử lý Event. Kích hoạt khi một biểu mẫu được đặt lại.
onResetCapture: Một phiên bản của onReset kích hoạt trong giai đoạn capture.
onSubmit: Một hàm xử lý Event. Kích hoạt khi một biểu mẫu được gửi.
onSubmitCapture: Một phiên bản của onSubmit kích hoạt trong giai đoạn capture.

Các sự kiện này chỉ kích hoạt cho các phần tử <dialog>. Không giống như các sự kiện của trình duyệt, chúng nổi lên trong React:

onCancel: Một hàm xử lý Event. Kích hoạt khi người dùng cố gắng đóng hộp thoại.
onCancelCapture: Một phiên bản của onCancel kích hoạt trong giai đoạn capture.
onClose: Một hàm xử lý Event. Kích hoạt khi một hộp thoại đã được đóng.
onCloseCapture: Một phiên bản của onClose kích hoạt trong giai đoạn capture.

Các sự kiện này chỉ kích hoạt cho các phần tử <details>. Không giống như các sự kiện của trình duyệt, chúng nổi lên trong React:

onToggle: Một hàm xử lý Event. Kích hoạt khi người dùng bật tắt các chi tiết.
onToggleCapture: Một phiên bản của onToggle kích hoạt trong giai đoạn capture.

Các sự kiện này kích hoạt cho các phần tử <img>, <iframe>, <object>, <embed>, <link> và SVG <image>. Không giống như các sự kiện của trình duyệt, chúng nổi lên trong React:

onLoad: Một hàm xử lý Event. Kích hoạt khi tài nguyên đã tải.
onLoadCapture: Một phiên bản của onLoad kích hoạt trong giai đoạn capture.
onError: Một hàm xử lý Event. Kích hoạt khi tài nguyên không thể tải.
onErrorCapture: Một phiên bản của onError kích hoạt trong giai đoạn capture.

Các sự kiện này kích hoạt cho các tài nguyên như <audio> và <video>. Không giống như các sự kiện của trình duyệt, chúng nổi lên trong React:

onAbort: Một hàm xử lý Event. Kích hoạt khi tài nguyên chưa được tải đầy đủ, nhưng không phải do lỗi.
onAbortCapture: Một phiên bản của onAbort kích hoạt trong giai đoạn capture.
onCanPlay: Một hàm xử lý Event. Kích hoạt khi có đủ dữ liệu để bắt đầu phát, nhưng không đủ để phát đến cuối mà không cần bộ đệm.
onCanPlayCapture: Một phiên bản của onCanPlay kích hoạt trong giai đoạn capture.
onCanPlayThrough: Một hàm xử lý Event. Kích hoạt khi có đủ dữ liệu để có thể bắt đầu phát mà không cần bộ đệm cho đến cuối.
onCanPlayThroughCapture: Một phiên bản của onCanPlayThrough kích hoạt trong giai đoạn capture.
onDurationChange: Một hàm xử lý Event. Kích hoạt khi thời lượng phương tiện đã được cập nhật.
onDurationChangeCapture: Một phiên bản của onDurationChange kích hoạt trong giai đoạn capture.
onEmptied: Một hàm xử lý Event. Kích hoạt khi phương tiện đã trở nên trống.
onEmptiedCapture: Một phiên bản của onEmptied kích hoạt trong giai đoạn capture.
onEncrypted: Một hàm xử lý Event. Kích hoạt khi trình duyệt gặp phương tiện được mã hóa.
onEncryptedCapture: Một phiên bản của onEncrypted kích hoạt trong giai đoạn capture.
onEnded: Một hàm xử lý Event. Kích hoạt khi quá trình phát dừng vì không còn gì để phát.
onEndedCapture: Một phiên bản của onEnded kích hoạt trong giai đoạn capture.
onError: Một hàm xử lý Event. Kích hoạt khi tài nguyên không thể tải.
onErrorCapture: Một phiên bản của onError kích hoạt trong giai đoạn capture.
onLoadedData: Một hàm xử lý Event. Kích hoạt khi khung phát lại hiện tại đã tải.
onLoadedDataCapture: Một phiên bản của onLoadedData kích hoạt trong giai đoạn capture.
onLoadedMetadata: Một hàm xử lý Event. Kích hoạt khi siêu dữ liệu đã tải.
onLoadedMetadataCapture: Một phiên bản của onLoadedMetadata kích hoạt trong giai đoạn capture.
onLoadStart: Một hàm xử lý Event. Kích hoạt khi trình duyệt bắt đầu tải tài nguyên.
onLoadStartCapture: Một phiên bản của onLoadStart kích hoạt trong giai đoạn capture.
onPause: Một hàm xử lý Event. Kích hoạt khi phương tiện bị tạm dừng.
onPauseCapture: Một phiên bản của onPause kích hoạt trong giai đoạn capture.
onPlay: Một hàm xử lý Event. Kích hoạt khi phương tiện không còn bị tạm dừng.
onPlayCapture: Một phiên bản của onPlay kích hoạt trong giai đoạn capture.
onPlaying: Một hàm xử lý Event. Kích hoạt khi phương tiện bắt đầu hoặc khởi động lại phát.
onPlayingCapture: Một phiên bản của onPlaying kích hoạt trong giai đoạn capture.
onProgress: Một hàm xử lý Event. Kích hoạt định kỳ trong khi tài nguyên đang tải.
onProgressCapture: Một phiên bản của onProgress kích hoạt trong giai đoạn capture.
onRateChange: Một hàm xử lý Event. Kích hoạt khi tốc độ phát lại thay đổi.
onRateChangeCapture: Một phiên bản của onRateChange kích hoạt trong giai đoạn capture.
onResize: Một hàm xử lý Event. Kích hoạt khi video thay đổi kích thước.
onResizeCapture: Một phiên bản của onResize kích hoạt trong giai đoạn capture.
onSeeked: Một hàm xử lý Event. Kích hoạt khi một thao tác tìm kiếm hoàn tất.
onSeekedCapture: Một phiên bản của onSeeked kích hoạt trong giai đoạn capture.
onSeeking: Một hàm xử lý Event. Kích hoạt khi một thao tác tìm kiếm bắt đầu.
onSeekingCapture: Một phiên bản của onSeeking kích hoạt trong giai đoạn capture.
onStalled: Một hàm xử lý Event. Kích hoạt khi trình duyệt đang chờ dữ liệu nhưng nó vẫn không tải.
onStalledCapture: Một phiên bản của onStalled kích hoạt trong giai đoạn capture.
onSuspend: Một hàm xử lý Event. Kích hoạt khi tải tài nguyên bị tạm dừng.
onSuspendCapture: Một phiên bản của onSuspend kích hoạt trong giai đoạn capture.
onTimeUpdate: Một hàm xử lý Event. Kích hoạt khi thời gian phát lại hiện tại được cập nhật.
onTimeUpdateCapture: Một phiên bản của onTimeUpdate kích hoạt trong giai đoạn capture.
onVolumeChange: Một hàm xử lý Event. Kích hoạt khi âm lượng đã thay đổi.
onVolumeChangeCapture: Một phiên bản của onVolumeChange kích hoạt trong giai đoạn capture.
onWaiting: Một hàm xử lý Event. Kích hoạt khi quá trình phát dừng do tạm thời thiếu dữ liệu.
onWaitingCapture: Một phiên bản của onWaiting kích hoạt trong giai đoạn capture.

Lưu ý

Bạn không thể truyền cả children và dangerouslySetInnerHTML cùng một lúc.
Một số sự kiện (như onAbort và onLoad) không nổi lên trong trình duyệt, nhưng nổi lên trong React.

Hàm callback `ref`

Thay vì một đối tượng ref (như đối tượng được trả về bởi useRef), bạn có thể truyền một hàm cho thuộc tính ref.

<div ref={(node) => {
  console.log('Đã gắn', node);

  return () => {
    console.log('Dọn dẹp', node)
  }
}}>

Xem một ví dụ về cách sử dụng callback ref.

Khi nút DOM <div> được thêm vào màn hình, React sẽ gọi callback ref của bạn với node DOM làm đối số. Khi nút DOM <div> đó bị xóa, React sẽ gọi hàm dọn dẹp được trả về từ callback của bạn.

React cũng sẽ gọi callback ref của bạn bất cứ khi nào bạn truyền một callback ref khác. Trong ví dụ trên, (node) => { ... } là một hàm khác nhau trên mỗi lần render. Khi thành phần của bạn render lại, hàm trước đó sẽ được gọi với null làm đối số và hàm tiếp theo sẽ được gọi với nút DOM.

Tham số

node: Một nút DOM. React sẽ truyền cho bạn nút DOM khi ref được gắn. Trừ khi bạn truyền cùng một tham chiếu hàm cho callback ref trên mỗi lần render, callback sẽ tạm thời được dọn dẹp và tạo lại trong mỗi lần render lại của thành phần.

Note

React 19 đã thêm các hàm dọn dẹp cho các callback `ref`.

Để hỗ trợ khả năng tương thích ngược, nếu một hàm dọn dẹp không được trả về từ callback ref, node sẽ được gọi với null khi ref bị tách ra. Hành vi này sẽ bị xóa trong một phiên bản tương lai.

Trả về

tùy chọn hàm dọn dẹp: Khi ref bị tách ra, React sẽ gọi hàm dọn dẹp. Nếu một hàm không được trả về bởi callback ref, React sẽ gọi lại callback với null làm đối số khi ref bị tách ra. Hành vi này sẽ bị xóa trong một phiên bản tương lai.

Lưu ý

Khi Strict Mode được bật, React sẽ chạy thêm một chu kỳ thiết lập + dọn dẹp chỉ dành cho phát triển trước lần thiết lập thực tế đầu tiên. Đây là một bài kiểm tra căng thẳng để đảm bảo rằng logic dọn dẹp của bạn “phản ánh” logic thiết lập của bạn và nó dừng hoặc hoàn tác bất cứ điều gì mà thiết lập đang làm. Nếu điều này gây ra sự cố, hãy triển khai hàm dọn dẹp.
Khi bạn truyền một callback ref khác, React sẽ gọi hàm dọn dẹp của callback trước đó nếu được cung cấp. Nếu không có hàm dọn dẹp nào được xác định, callback ref sẽ được gọi với null làm đối số. Hàm tiếp theo sẽ được gọi với nút DOM.

Đối tượng sự kiện React

Trình xử lý sự kiện của bạn sẽ nhận được một đối tượng sự kiện React. Nó còn được gọi là “sự kiện tổng hợp”.

<button onClick={e => {
  console.log(e); // Đối tượng sự kiện React
}} />

Nó tuân theo cùng một tiêu chuẩn như các sự kiện DOM cơ bản, nhưng khắc phục một số điểm không nhất quán của trình duyệt.

Một số sự kiện React không ánh xạ trực tiếp đến các sự kiện gốc của trình duyệt. Ví dụ: trong onMouseLeave, e.nativeEvent sẽ trỏ đến một sự kiện mouseout. Ánh xạ cụ thể không phải là một phần của API công khai và có thể thay đổi trong tương lai. Nếu bạn cần sự kiện trình duyệt cơ bản vì một lý do nào đó, hãy đọc nó từ e.nativeEvent.

Các thuộc tính

Các đối tượng sự kiện React triển khai một số thuộc tính Event tiêu chuẩn:

bubbles: Một boolean. Trả về liệu sự kiện có nổi lên qua DOM hay không.
cancelable: Một boolean. Trả về liệu sự kiện có thể bị hủy hay không.
currentTarget: Một nút DOM. Trả về nút mà trình xử lý hiện tại được gắn vào trong cây React.
defaultPrevented: Một boolean. Trả về liệu preventDefault đã được gọi hay chưa.
eventPhase: Một số. Trả về giai đoạn mà sự kiện hiện đang ở.
isTrusted: Một boolean. Trả về liệu sự kiện có được khởi tạo bởi người dùng hay không.
target: Một nút DOM. Trả về nút mà sự kiện đã xảy ra trên đó (có thể là một phần tử con ở xa).
timeStamp: Một số. Trả về thời gian khi sự kiện xảy ra.

Ngoài ra, các đối tượng sự kiện React cung cấp các thuộc tính sau:

nativeEvent: Một Event DOM. Đối tượng sự kiện trình duyệt gốc.

Các phương thức

Các đối tượng sự kiện React triển khai một số phương thức Event tiêu chuẩn:

preventDefault(): Ngăn chặn hành động mặc định của trình duyệt cho sự kiện.
stopPropagation(): Dừng sự lan truyền sự kiện qua cây React.

Ngoài ra, các đối tượng sự kiện React cung cấp các phương thức sau:

isDefaultPrevented(): Trả về một giá trị boolean cho biết liệu preventDefault đã được gọi hay chưa.
isPropagationStopped(): Trả về một giá trị boolean cho biết liệu stopPropagation đã được gọi hay chưa.
persist(): Không được sử dụng với React DOM. Với React Native, hãy gọi phương thức này để đọc các thuộc tính của sự kiện sau sự kiện.
isPersistent(): Không được sử dụng với React DOM. Với React Native, trả về liệu persist đã được gọi hay chưa.

Lưu ý

Các giá trị của currentTarget, eventPhase, target và type phản ánh các giá trị mà mã React của bạn mong đợi. Dưới nền, React gắn các trình xử lý sự kiện ở gốc, nhưng điều này không được phản ánh trong các đối tượng sự kiện React. Ví dụ: e.currentTarget có thể không giống với e.nativeEvent.currentTarget cơ bản. Đối với các sự kiện được polyfill, e.type (loại sự kiện React) có thể khác với e.nativeEvent.type (loại cơ bản).

Hàm xử lý `AnimationEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện CSS animation.

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

Tham số

e: Một đối tượng sự kiện React với các thuộc tính AnimationEvent bổ sung sau:

Hàm xử lý `ClipboardEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện Clipboard API.

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

Tham số

e: Một đối tượng sự kiện React với các thuộc tính ClipboardEvent bổ sung sau:
- clipboardData

Hàm xử lý `CompositionEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện input method editor (IME).

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

Tham số

e: Một đối tượng sự kiện React với các thuộc tính CompositionEvent bổ sung sau:
- data

Hàm xử lý `DragEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện 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>
</>

Tham số

e: Một đối tượng sự kiện React với các thuộc tính DragEvent bổ sung sau:
- dataTransfer
Nó cũng bao gồm các thuộc tính MouseEvent được kế thừa:
- altKey
- button
- buttons
- ctrlKey
- clientX
- clientY
- getModifierState(key)
- metaKey
- movementX
- movementY
- pageX
- pageY
- relatedTarget
- screenX
- screenY
- shiftKey
Nó cũng bao gồm các thuộc tính UIEvent được kế thừa:
- detail
- view

Hàm xử lý `FocusEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện focus.

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

Xem một ví dụ.

Tham số

e: Một đối tượng sự kiện React với các thuộc tính FocusEvent bổ sung sau:
- relatedTarget
Nó cũng bao gồm các thuộc tính UIEvent được kế thừa:
- detail
- view

Hàm xử lý `Event`

Một kiểu trình xử lý sự kiện cho các sự kiện chung.

Tham số

e: Một đối tượng sự kiện React không có thuộc tính bổ sung.

Hàm xử lý `InputEvent`

Một kiểu trình xử lý sự kiện cho sự kiện onBeforeInput.

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

Tham số

e: Một đối tượng sự kiện React với các thuộc tính InputEvent bổ sung sau:
- data

Hàm xử lý `KeyboardEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện bàn phím.

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

Xem một ví dụ.

Tham số

e: Một đối tượng sự kiện React với các thuộc tính KeyboardEvent bổ sung sau:
- altKey
- charCode
- code
- ctrlKey
- getModifierState(key)
- key
- keyCode
- locale
- metaKey
- location
- repeat
- shiftKey
- which
Nó cũng bao gồm các thuộc tính UIEvent được kế thừa:
- detail
- view

Hàm xử lý `MouseEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện chuột.

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

Xem một ví dụ.

Tham số

e: Một đối tượng sự kiện React với các thuộc tính MouseEvent bổ sung sau:
- altKey
- button
- buttons
- ctrlKey
- clientX
- clientY
- getModifierState(key)
- metaKey
- movementX
- movementY
- pageX
- pageY
- relatedTarget
- screenX
- screenY
- shiftKey
Nó cũng bao gồm các thuộc tính UIEvent được kế thừa:
- detail
- view

Hàm xử lý `PointerEvent`

Một kiểu trình xử lý sự kiện cho pointer events.

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

Xem một ví dụ.

Tham số

e: Một đối tượng sự kiện React với các thuộc tính PointerEvent bổ sung sau:
- height
- isPrimary
- pointerId
- pointerType
- pressure
- tangentialPressure
- tiltX
- tiltY
- twist
- width
Nó cũng bao gồm các thuộc tính MouseEvent được kế thừa:
- altKey
- button
- buttons
- ctrlKey
- clientX
- clientY
- getModifierState(key)
- metaKey
- movementX
- movementY
- pageX
- pageY
- relatedTarget
- screenX
- screenY
- shiftKey
Nó cũng bao gồm các thuộc tính UIEvent được kế thừa:
- detail
- view

Hàm xử lý `TouchEvent`

Một kiểu trình xử lý sự kiện cho touch events.

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

Tham số

e: Một đối tượng sự kiện React với các thuộc tính TouchEvent bổ sung sau:
Nó cũng bao gồm các thuộc tính UIEvent được kế thừa:
- detail
- view

Hàm xử lý `TransitionEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện CSS transition.

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

Tham số

e: Một đối tượng sự kiện React với các thuộc tính TransitionEvent bổ sung sau:

Hàm xử lý `UIEvent`

Một kiểu trình xử lý sự kiện cho các sự kiện UI chung.

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

Tham số

e: Một đối tượng sự kiện React với các thuộc tính UIEvent bổ sung sau:
- detail
- view

Hàm xử lý `WheelEvent`

Một kiểu trình xử lý sự kiện cho sự kiện onWheel.

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

Tham số

e: Một đối tượng sự kiện React với các thuộc tính WheelEvent bổ sung sau:
Nó cũng bao gồm các thuộc tính MouseEvent được kế thừa:
- altKey
- button
- buttons
- ctrlKey
- clientX
- clientY
- getModifierState(key)
- metaKey
- movementX
- movementY
- pageX
- pageY
- relatedTarget
- screenX
- screenY
- shiftKey
Nó cũng bao gồm các thuộc tính UIEvent được kế thừa:
- detail
- view

Cách sử dụng

Áp dụng các kiểu CSS

Trong React, bạn chỉ định một lớp CSS với className. Nó hoạt động giống như thuộc tính class trong HTML:

<img className="avatar" />

Sau đó, bạn viết các quy tắc CSS cho nó trong một tệp CSS riêng biệt:

/* Trong CSS của bạn */
.avatar {
  border-radius: 50%;
}

React không quy định cách bạn thêm các tệp CSS. Trong trường hợp đơn giản nhất, bạn sẽ thêm thẻ <link> vào HTML của bạn. Nếu bạn sử dụng một công cụ xây dựng hoặc một framework, hãy tham khảo tài liệu của nó để tìm hiểu cách thêm một tệp CSS vào dự án của bạn.

Đôi khi, các giá trị kiểu phụ thuộc vào dữ liệu. Sử dụng thuộc tính style để truyền một số kiểu động:

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

Trong ví dụ trên, style={{}} không phải là một cú pháp đặc biệt, mà là một đối tượng {} thông thường bên trong dấu ngoặc nhọn JSX. Chúng tôi khuyên bạn chỉ nên sử dụng thuộc tính style khi các kiểu của bạn phụ thuộc vào các biến JavaScript.

Fork

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

Tìm hiểu sâu

Làm thế nào để áp dụng nhiều lớp CSS một cách có điều kiện?

Để áp dụng các lớp CSS một cách có điều kiện, bạn cần tự tạo chuỗi className bằng JavaScript.

Ví dụ: className={'row ' + (isSelected ? 'selected': '')} sẽ tạo ra className="row" hoặc className="row selected" tùy thuộc vào việc isSelected có phải là true hay không.

Để làm cho điều này dễ đọc hơn, bạn có thể sử dụng một thư viện trợ giúp nhỏ như classnames:

import cn from 'classnames';

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

Điều này đặc biệt thuận tiện nếu bạn có nhiều lớp có điều kiện:

import cn from 'classnames';

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

Thao tác với một nút DOM bằng ref

Đôi khi, bạn sẽ cần lấy nút DOM của trình duyệt được liên kết với một thẻ trong JSX. Ví dụ: nếu bạn muốn tập trung vào một <input> khi một nút được nhấp, bạn cần gọi focus() trên nút DOM <input> của trình duyệt.

Để lấy nút DOM của trình duyệt cho một thẻ, khai báo một ref và truyền nó làm thuộc tính ref cho thẻ đó:

import { useRef } from 'react';

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

React sẽ đặt nút DOM vào inputRef.current sau khi nó được hiển thị trên màn hình.

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 vào ô input
      </button>
    </>
  );
}

Đọc thêm về thao tác DOM với ref và xem thêm các ví dụ.

Đối với các trường hợp sử dụng nâng cao hơn, thuộc tính ref cũng chấp nhận một hàm callback.

Thiết lập inner HTML một cách nguy hiểm

Bạn có thể truyền một chuỗi HTML thô cho một phần tử như sau:

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

Điều này rất nguy hiểm. Giống như thuộc tính innerHTML của DOM cơ bản, bạn phải hết sức thận trọng! Trừ khi markup đến từ một nguồn hoàn toàn đáng tin cậy, nếu không việc đưa vào lỗ hổng XSS là rất dễ dàng.

Ví dụ: nếu bạn sử dụng một thư viện Markdown chuyển đổi Markdown thành HTML, bạn tin rằng trình phân tích cú pháp của nó không chứa lỗi và người dùng chỉ thấy đầu vào của riêng họ, bạn có thể hiển thị HTML kết quả như sau:

Fork

import { Remarkable } from 'remarkable';

const md = new Remarkable();

function renderMarkdownToHTML(markdown) {
  // Điều này CHỈ an toàn vì HTML đầu ra
  // được hiển thị cho cùng một người dùng và vì bạn
  // tin tưởng trình phân tích cú pháp Markdown này không có lỗi.
  const renderedHTML = md.render(markdown);
  return {__html: renderedHTML};
}

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

Đối tượng {__html} nên được tạo càng gần nơi HTML được tạo càng tốt, như ví dụ trên trong hàm renderMarkdownToHTML. Điều này đảm bảo rằng tất cả HTML thô được sử dụng trong mã của bạn được đánh dấu rõ ràng là như vậy và chỉ các biến mà bạn mong đợi chứa HTML mới được truyền cho dangerouslySetInnerHTML. Không nên tạo đối tượng nội tuyến như <div dangerouslySetInnerHTML={{__html: markup}} />.

Để xem tại sao việc hiển thị HTML tùy ý là nguy hiểm, hãy thay thế mã trên bằng mã này:

const post = {
  // Hãy tưởng tượng nội dung này được lưu trữ trong cơ sở dữ liệu.
  content: `<img src="" onerror='alert("bạn đã bị hack")'>`
};

export default function MarkdownPreview() {
  // 🔴 LỖ HỔNG BẢO MẬT: truyền đầu vào không đáng tin cậy cho dangerouslySetInnerHTML
  const markup = { __html: post.content };
  return <div dangerouslySetInnerHTML={markup} />;
}

Mã được nhúng trong HTML sẽ chạy. Một hacker có thể sử dụng lỗ hổng bảo mật này để đánh cắp thông tin người dùng hoặc thực hiện các hành động thay mặt họ. Chỉ sử dụng dangerouslySetInnerHTML với dữ liệu đáng tin cậy và đã được làm sạch.

Xử lý các sự kiện chuột

Ví dụ này cho thấy một số sự kiện chuột phổ biến và khi chúng kích hoạt.

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)')}
      >
        Nút thứ nhất
      </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)')}
      >
        Nút thứ hai
      </button>
    </div>
  );
}

Xử lý các sự kiện con trỏ

Ví dụ này cho thấy một số sự kiện con trỏ phổ biến và khi chúng kích hoạt.

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' }}
      >
        Con thứ nhất
      </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' }}
      >
        Con thứ hai
      </div>
    </div>
  );
}

Xử lý các sự kiện focus

Trong React, các sự kiện focus nổi lên. Bạn có thể sử dụng currentTarget và relatedTarget để phân biệt xem các sự kiện focus hoặc blur có bắt nguồn từ bên ngoài phần tử cha hay không. Ví dụ này cho thấy cách phát hiện focus vào một phần tử con, focus vào phần tử cha và cách phát hiện focus đi vào hoặc rời khỏi toàn bộ cây con.

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)) {
          // Không kích hoạt khi hoán đổi focus giữa các phần tử con
          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)) {
          // Không kích hoạt khi hoán đổi focus giữa các phần tử con
          console.log('focus left parent');
        }
      }}
    >
      <label>
        Tên:
        <input name="firstName" />
      </label>
      <label>
        Họ:
        <input name="lastName" />
      </label>
    </div>
  );
}

Xử lý các sự kiện bàn phím

Ví dụ này cho thấy một số sự kiện bàn phím phổ biến và khi chúng kích hoạt.

Fork

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

PreviousComponents

Next<form>

Common components (e.g. <div>)

Tham khảo

Các thành phần chung (ví dụ: <div>)

Props

Lưu ý

Hàm callback ref

Tham số

Note

React 19 đã thêm các hàm dọn dẹp cho các callback ref.

Trả về

Lưu ý

Đối tượng sự kiện React

Các thuộc tính

Các phương thức

Lưu ý

Hàm xử lý AnimationEvent

Tham số

Hàm xử lý ClipboardEvent

Tham số

Hàm xử lý CompositionEvent

Tham số

Hàm xử lý DragEvent

Tham số

Hàm xử lý FocusEvent

Tham số

Hàm xử lý Event

Tham số

Hàm xử lý InputEvent

Tham số

Hàm xử lý KeyboardEvent

Tham số

Hàm xử lý MouseEvent

Tham số

Hàm xử lý PointerEvent

Tham số

Hàm xử lý TouchEvent

Tham số

Hàm xử lý TransitionEvent

Tham số

Hàm xử lý UIEvent

Tham số

Hàm xử lý WheelEvent

Tham số

Cách sử dụng

Áp dụng các kiểu CSS

Tìm hiểu sâu

Làm thế nào để áp dụng nhiều lớp CSS một cách có điều kiện?

Thao tác với một nút DOM bằng ref

Thiết lập inner HTML một cách nguy hiểm

Xử lý các sự kiện chuột

Xử lý các sự kiện con trỏ

Xử lý các sự kiện focus

Xử lý các sự kiện bàn phím

Các thành phần chung (ví dụ: `<div>`)

Hàm callback `ref`

React 19 đã thêm các hàm dọn dẹp cho các callback `ref`.

Hàm xử lý `AnimationEvent`

Hàm xử lý `ClipboardEvent`

Hàm xử lý `CompositionEvent`

Hàm xử lý `DragEvent`

Hàm xử lý `FocusEvent`

Hàm xử lý `Event`

Hàm xử lý `InputEvent`

Hàm xử lý `KeyboardEvent`

Hàm xử lý `MouseEvent`

Hàm xử lý `PointerEvent`

Hàm xử lý `TouchEvent`

Hàm xử lý `TransitionEvent`

Hàm xử lý `UIEvent`

Hàm xử lý `WheelEvent`