ReactJS: Bắt sự kiện (handle event) trong React mới nhất

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

onCopy onCut onPaste

DOMDataTransfer clipboardData

onCompositionEnd onCompositionStart onCompositionUpdate

string data

onKeyDown onKeyPress onKeyUp

boolean altKeynumber charCodeboolean ctrlKeyboolean getModifierState(key)string keynumber keyCodestring localenumber locationboolean metaKeyboolean repeatboolean shiftKeynumber which

onFocus onBlur

DOMEventTarget relatedTarget

onChange onInput onInvalid onReset onSubmit

onError onLoad

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExitonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeaveonMouseMove onMouseOut onMouseOver onMouseUp

boolean altKeynumber buttonnumber buttonsnumber clientXnumber clientYboolean ctrlKeyboolean getModifierState(key)boolean metaKeynumber pageXnumber pageYDOMEventTarget relatedTargetnumber screenXnumber screenYboolean shiftKey

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCaptureonLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

number pointerIdnumber widthnumber heightnumber pressurenumber tangentialPressurenumber tiltXnumber tiltYnumber twiststring pointerTypeboolean isPrimary

onSelect

onTouchCancel onTouchEnd onTouchMove onTouchStart

boolean altKeyDOMTouchList changedTouchesboolean ctrlKeyboolean getModifierState(key)boolean metaKeyboolean shiftKeyDOMTouchList targetTouchesDOMTouchList touches

onScroll

number detailDOMAbstractView view

onWheel

number deltaModenumber deltaXnumber deltaYnumber deltaZ

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncryptedonEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlayonPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspendonTimeUpdate onVolumeChange onWaiting

onLoad onError

onAnimationStart onAnimationEnd onAnimationIteration

string animationNamestring pseudoElementfloat elapsedTime

onTransitionEnd

string propertyNamestring pseudoElementfloat elapsedTime

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.