Bắt sự kiện (handle event) trong React
Việc bắt sự kiện (handle events) trong React rất giống với những element DOM trong javascript. Nhưng có một số khác biệt về cú pháp như sau:
- Events của React được đặt tên theo camelCase thay về lowercase.
- Với JSX, chúng ta có thể sử dụng hàm (function) để handle events.
Trong React, chúng ta không thể “return false” để chặn những hành vi mặc định của trình duyệt mà phải gọi preventDefault trực tiếp.
Ví dụ, với code HTML thông thường, để ngăn chặn hành vi mặc định của trình duyệt về event submit, ta có thể viết như sau:
form button type="submit"Submit/button/form
Nhưng trong React, sẽ thay thế bằng:
function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( form onSubmit={handleSubmit} button type="submit"Submit/button /form );}
Ở đây, biến “e” là một sự kiện ảo hay còn gọi là SyntheticEvent. React định nghĩa synthetic event theo chuẩn W3C. Vì thế, chúng ta không cần quan tâm về khả năng tương thích giữa các browser (cross-browser).
Khi sử dụng React, ta không cần gọi “addEventListener” để element DOM lắng nghe khi nó được khởi tạo. Thay vào đó, chỉ cần chung cấp listener khi element đó được render lần đầu tiên.
Khi ta định nghĩa một class component, một pattern phổ biến là sử dụng các phương thức của class để bắt sự kiện.
Khi sử dụng funtion thường để trong React, chúng ta bắt buộc phải binding nó. Nếu không thì giá trị this sẽ là “undefined” và ta không thể gọi function cần để thực thi.
Ví dụ, component Toggle dưới đây render một nút để người dùng thay đổi trạng thái ON – OFF:
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // Phép "ràng buộc" (bind) này là cần thiết để con trỏ `this` hoạt động trong callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState = ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( button onClick={this.handleClick} {this.state.isToggleOn ? 'ON' : 'OFF'} /button ); }}
Cũng có cách không cần binding khi định nghĩa một function đó là chúng ta sử dụng cú pháp “arrow function” như sau:
class LoggingButton extends React.Component { handleClick = () = { console.log('this is:', this); } render() { return ( button onClick={this.handleClick} Click me /button ); }}
Hoặc:
class LoggingButton extends React.Component { handleClick() { console.log("this is:", this); } render() { return button onClick={() = this.handleClick()}Click me/button; }}
Bên cạnh đó, chúng ta có thể truyền thêm tham số cho events như sau:
button onClick={(e) = this.deleteRow(id, e)}Delete Row/buttonbutton onClick={this.deleteRow.bind(this, id)}Delete Row/button
Sự kiện ảo (SyntheticEvent) trong React
Các hàm xử lý sự kiện sẽ được truyền vào một instance của SyntheticEvent. Hoặc có thể nói đây là lớp bọc các event để sử dụng tương đương với các sự kiện của trình duyệt). Nó có giao diện (interface) giống như sự kiện của trình duyệt bao gồm stopPropagation(), và preventDefault() và hoạt động giống nhau trên mọi trình duyệt. Mọi SyntheticEvent đều là một object và có chung những thuộc tính sau:
Các Events được hỗ trợ trong React
Clipboard Events =
Tên event
onCopy onCut onPaste
Thuộc tính
DOMDataTransfer clipboardData
Composition Events =
Tên event
onCompositionEnd onCompositionStart onCompositionUpdate
Thuộc tính
string data
Keyboard Events =
Tên event
onKeyDown onKeyPress onKeyUp
Thuộc tính
boolean altKeynumber charCodeboolean ctrlKeyboolean getModifierState(key)string keynumber keyCodestring localenumber locationboolean metaKeyboolean repeatboolean shiftKeynumber which
Focus Events =
Tên event
onFocus onBlur
Thuộc tính
DOMEventTarget relatedTarget
Form Events =
Tên event
onChange onInput onInvalid onReset onSubmit
Generic Events =
Tên event
onError onLoad
Mouse Events =
Tên event
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExitonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeaveonMouseMove onMouseOut onMouseOver onMouseUp
Thuộc tính
boolean altKeynumber buttonnumber buttonsnumber clientXnumber clientYboolean ctrlKeyboolean getModifierState(key)boolean metaKeynumber pageXnumber pageYDOMEventTarget relatedTargetnumber screenXnumber screenYboolean shiftKey
Pointer Events =
Tên event
onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCaptureonLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
Thuộc tính
number pointerIdnumber widthnumber heightnumber pressurenumber tangentialPressurenumber tiltXnumber tiltYnumber twiststring pointerTypeboolean isPrimary
Selection Events =
Tên event
onSelect
Touch Events =
Tên event
onTouchCancel onTouchEnd onTouchMove onTouchStart
Thuộc tính
boolean altKeyDOMTouchList changedTouchesboolean ctrlKeyboolean getModifierState(key)boolean metaKeyboolean shiftKeyDOMTouchList targetTouchesDOMTouchList touches
UI Events =
Tên event
onScroll
Thuộc tính
number detailDOMAbstractView view
Wheel Events =
Tên event
onWheel
Thuộc tính
number deltaModenumber deltaXnumber deltaYnumber deltaZ
Media Events =
Tên event
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncryptedonEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlayonPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspendonTimeUpdate onVolumeChange onWaiting
Image Events =
Tên event
onLoad onError
Animation Events =
Tên event
onAnimationStart onAnimationEnd onAnimationIteration
Thuộc tính
string animationNamestring pseudoElementfloat elapsedTime
Transition Events =
Tên event
onTransitionEnd
Thuộc tính
string propertyNamestring pseudoElementfloat elapsedTime
Toggle Events =
Tên event
onToggle
Phía trên là tất cả những sự kiện mà React đã hỗ trợ. Hy vọng bài viết này sẽ hữu ích với mọi người. Cám ơn mọi người đã ghé thăm bài viết.