ReactJS

Events trong React

Posted on by Dục Đoàn Trình
Rate this post

Event là một action có thể được kích hoạt do action của người dùng hoặc Event do hệ thống tạo ra. Ví dụ: một cú nhấp chuột, tải trang web, nhấn phím, thay đổi kích thước cửa sổ và các tương tác khác được gọi là Event. Hãy cùng W3seo tìm hiểu về các sự kiện này.

Hướng dẫn khác:

  1. State và Props trong react
  2. Component trong React: những điều cần biết
  3. Routing trong React
  4. Sử dụng context trong React
  5. Refs(tham chiếu) trong React
  6. Hướng dẫn Component API trong React
  7. Higher-Order Component trong React
  8. Các stateful component và stateless trong react
  9. ReactJS là gì? cách cài đặt ReactJS
  10. Sử dụng table trong React

Cơ bản về sự kiện trong React

Trong React, sự kiện là các hành động hoặc tương tác từ người dùng hoặc từ hệ thống khác mà các thành phần React có thể phản ứng và xử lý. Sự kiện trong React được truyền qua các thuộc tính đặc biệt gọi là “props”.

Các bước cơ bản để xử lý sự kiện trong React là như sau:

  1. Đăng ký sự kiện: Để xử lý một sự kiện, bạn cần đăng ký nó trong thành phần React của bạn. Điều này thường được thực hiện bằng cách sử dụng thuộc tính truyền vào gọi là “props”. Ví dụ, để xử lý sự kiện click, bạn có thể sử dụng thuộc tính “onClick”.
  2. Định nghĩa hàm xử lý sự kiện: Sau khi đã đăng ký sự kiện, bạn cần định nghĩa hàm xử lý tương ứng. Hàm này sẽ được gọi khi sự kiện xảy ra. Hàm xử lý sự kiện có thể được định nghĩa bên trong thành phần React hoặc ở ngoài và được truyền vào như một hàm props.
  3. Xử lý sự kiện: Trong hàm xử lý sự kiện, bạn có thể thực hiện các hành động mà bạn muốn khi sự kiện xảy ra. Điều này có thể là cập nhật trạng thái của thành phần, gọi các hàm khác, hoặc thực hiện các tác vụ khác.

Ví dụ, để xử lý sự kiện click trong một thành phần React, bạn có thể làm như sau:

import React from 'react';

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

Trong ví dụ trên, chúng ta đăng ký sự kiện onClick và truyền hàm handleClick làm hàm xử lý. Khi người dùng nhấp vào nút, hàm handleClick sẽ được gọi và in ra thông báo trong console.

Điều này chỉ là một ví dụ đơn giản về xử lý sự kiện trong React. React hỗ trợ nhiều loại sự kiện khác nhau như onChange, onSubmit, onMouseOver, và nhiều hơn nữa. Bạn cũng có thể truyền tham số vào hàm xử lý sự kiện và sử dụng các phương pháp khác để quản lý trạng thái và tương tác động của thành phần.

React có hệ thống xử lý Event của riêng nó, rất giống với việc xử lý các Event trên các element DOM. Hệ thống xử lý Event phản ứng được gọi là Event tổng hợp. Event tổng hợp là một trình bao bọc trình duyệt chéo của Event gốc của trình duyệt.

Xử lý các Event bằng react có một số khác biệt về cú pháp so với việc xử lý các Event trên DOM. Đó là:

  • Các Event React được đặt tên là camelCase thay vì chữ thường.
  • Với JSX, một hàm được truyền dưới dạng trình xử lý Event thay vì một String.

 Ví dụ:

Khai báo Event trong HTML thuần túy:

<button onclick="showMessage()">  
       Hello React  
</button>

Khai báo Event trong React:

<button onClick={showMessage}>  
      Hello React  
</button>

Trong react, chúng ta không thể trả về false để ngăn chặn hành vi mặc định. Chúng ta phải gọi Event PreventDefault một cách rõ ràng để ngăn chặn hành vi mặc định. Ví dụ:

Trong HTML thuần túy, để ngăn hành vi liên kết mặc định khi mở một trang mới, chúng ta có thể viết:

<a href="#" onclick="console.log('You had clicked a Link.'); return false">  
    Click_Me  
</a>

Trong React, chúng ta có thể viết nó là:

function ActionLink() {  
    function handleClick(e) {  
        e.preventDefault();  
        console.log('You had clicked a Link.');  
    }  
    return (  
        <a href="#" onClick={handleClick}>  
              Click_Me  
        </a>  
    );  
}

Trong ví dụ trên, e là Event tổng hợp được định nghĩa theo thông số W3C.

Bây giờ chúng ta hãy xem cách sử dụng Event trong React.

Ví dụ

Trong ví dụ dưới đây, chúng tôi chỉ sử dụng một thành phần và thêm một Event onChange. Event này sẽ kích hoạt hàm changeText, hàm trả về tên công ty.

import React, { Component } from 'react';  
class App extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {  
            companyName: ''  
        };  
    }  
    changeText(event) {  
        this.setState({  
            companyName: event.target.value  
        });  
    }  
    render() {  
        return (  
            <div>  
                <h2>Simple Event Example</h2>  
                <label htmlFor="name">Enter company name: </label>  
                <input type="text" id="companyName" onChange={this.changeText.bind(this)}/>  
                <h4>You entered: { this.state.companyName }</h4>  
            </div>  
        );  
    }  
}  
export default App;

Đầu ra

Khi bạn thực thi đoạn mã trên, bạn sẽ nhận được kết quả sau.

Sau khi nhập tên vào hộp văn bản, bạn sẽ nhận được kết quả như màn hình bên dưới.

Xem thêm Dịch vụ truyền thông media chuyên nghiệp cho doanh nghiệp

Các loại sự kiện phổ biến trong React

Trong React, có nhiều loại sự kiện phổ biến mà bạn có thể xử lý trong các thành phần. Dưới đây là một số loại sự kiện phổ biến trong React:

  1. onClick: Sự kiện xảy ra khi người dùng nhấp chuột lên một phần tử.
  2. onChange: Sự kiện xảy ra khi giá trị của một phần tử đầu vào (input) thay đổi, ví dụ như ô văn bản (input text), hộp kiểm (checkbox), hoặc các thành phần giao diện người dùng khác.
  3. onSubmit: Sự kiện xảy ra khi người dùng gửi một biểu mẫu (form) bằng cách nhấn phím Enter hoặc nút gửi (submit).
  4. onMouseOver: Sự kiện xảy ra khi con trỏ chuột di chuyển lên trên một phần tử.
  5. onMouseOut: Sự kiện xảy ra khi con trỏ chuột di chuyển ra khỏi một phần tử.
  6. onKeyDown: Sự kiện xảy ra khi người dùng nhấn một phím trên bàn phím.
  7. onKeyUp: Sự kiện xảy ra khi người dùng nhả phím sau khi nhấn xuống.

Đây chỉ là một số ví dụ về các sự kiện phổ biến trong React. React hỗ trợ nhiều loại sự kiện khác nhau, bạn có thể xem danh sách đầy đủ và tìm hiểu thêm tại React Event Handling trong tài liệu chính thức của React.

Khi sử dụng các sự kiện này, bạn có thể xử lý và đáp ứng theo nhu cầu của ứng dụng của bạn.

Truyền tham số và truy cập vào sự kiện

Trong React, bạn có thể truyền tham số và truy cập vào thông tin của sự kiện thông qua hàm xử lý sự kiện. Dưới đây là một số cách thức thực hiện:

  1. Truyền tham số: Để truyền tham số vào hàm xử lý sự kiện, bạn có thể sử dụng một hàm trung gian. Ví dụ:
class MyComponent extends React.Component {
  handleClick(param) {
    console.log('Button clicked with param:', param);
  }

  render() {
    const param = 'Hello';
    return (
      <button onClick={() => this.handleClick(param)}>Click me</button>
    );
  }
}

Trong ví dụ trên, chúng ta sử dụng một hàm trung gian để truyền tham số param vào hàm handleClick. Khi nút được nhấp, hàm handleClick sẽ được gọi với tham số đã truyền.

  1. Truy cập vào sự kiện: Khi xử lý sự kiện, React cung cấp một đối tượng sự kiện (event object) để bạn truy cập thông tin chi tiết về sự kiện. Ví dụ:
class MyComponent extends React.Component {
  handleClick(event) {
    console.log('Button clicked at:', event.clientX, event.clientY);
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

Trong ví dụ trên, chúng ta truy cập vào tọa độ x và y của con trỏ chuột thông qua đối tượng sự kiện event. Bạn có thể sử dụng các thuộc tính như clientX, clientY, target, currentTarget, và nhiều thuộc tính khác để truy cập và sử dụng thông tin liên quan đến sự kiện.

Lưu ý rằng khi bạn sử dụng hàm xử lý trực tiếp trong JSX (onClick={this.handleClick}), tham số của sự kiện sẽ được truyền tự động vào hàm xử lý. Nếu bạn muốn truyền thêm tham số khác, bạn cần sử dụng cú pháp hàm trung gian (() => this.handleClick(param)).

Qua đó, bạn có thể truyền tham số và truy cập vào thông tin của sự kiện một cách linh hoạt và tiện lợi khi xử lý sự kiện trong React.

Xem thêm OpenCV mouse Event

Xử lý sự kiện trong các thành phần con

Trong React, khi bạn xử lý sự kiện trong các thành phần con, bạn có thể truyền hàm xử lý sự kiện từ thành phần cha xuống thành phần con thông qua các thuộc tính props. Dưới đây là cách thức thực hiện:

  1. Truyền hàm xử lý sự kiện từ thành phần cha: Trong thành phần cha, bạn có thể định nghĩa một hàm xử lý sự kiện và truyền nó xuống thành phần con thông qua props.
class ParentComponent extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return (
      <ChildComponent onClick={this.handleClick} />
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>Click me</button>
    );
  }
}

Trong ví dụ trên, hàm xử lý sự kiện handleClick được định nghĩa trong thành phần cha ParentComponent. Nó được truyền xuống thành phần con ChildComponent thông qua thuộc tính props onClick. Trong thành phần con, chúng ta gán this.props.onClick vào sự kiện onClick của nút, để khi nút được nhấp, hàm xử lý sự kiện của thành phần cha sẽ được gọi.

  1. Truyền tham số từ thành phần con lên thành phần cha: Nếu bạn muốn truyền tham số từ thành phần con lên thành phần cha, bạn có thể sử dụng hàm trung gian giống như đã mô tả trong câu trả lời trước.
class ParentComponent extends React.Component {
  handleClick(param) {
    console.log('Button clicked with param:', param);
  }

  render() {
    return (
      <ChildComponent onClick={() => this.handleClick('Hello')} />
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>Click me</button>
    );
  }
}

Trong ví dụ trên, khi thành phần con ChildComponent nhấp vào nút, hàm trung gian sẽ được gọi và truyền tham số 'Hello' lên thành phần cha ParentComponent. Hàm xử lý sự kiện handleClick trong thành phần cha sẽ nhận được tham số này.

Qua đó, bạn có thể xử lý sự kiện trong các thành phần con và truyền thông tin lên thành phần cha thông qua props trong React.

Xem thêm Event loop trong JavaScript là gì ?

Ngăn chặn hành vi mặc định và bubbling

Trong React, bạn có thể ngăn chặn hành vi mặc định và bubbling của sự kiện bằng cách sử dụng phương thức preventDefault() và stopPropagation(). Dưới đây là cách sử dụng chúng:

  1. Ngăn chặn hành vi mặc định: Đôi khi bạn muốn ngăn chặn hành vi mặc định của một sự kiện trong React, ví dụ như ngăn chặn một liên kết chuyển hướng tới một trang mới khi người dùng nhấp vào nó. Bạn có thể sử dụng phương thức preventDefault() để làm điều này.
class MyComponent extends React.Component {
  handleClick(event) {
    event.preventDefault();
    console.log('Link clicked, but prevented default behavior.');
  }

  render() {
    return (
      <a href="https://example.com" onClick={this.handleClick}>Click me</a>
    );
  }
}

Trong ví dụ trên, khi người dùng nhấp vào liên kết, hàm xử lý sự kiện handleClick sẽ được gọi. Tuy nhiên, phương thức preventDefault() sẽ ngăn chặn hành vi mặc định của sự kiện, trong trường hợp này là chuyển hướng tới trang mới.

  1. Ngăn chặn bubbling: Khi một sự kiện xảy ra trong một thành phần con, nó có thể lan truyền lên các thành phần cha thông qua quá trình bubbling (phân phối ngược). Bạn có thể ngăn chặn lan truyền này bằng cách sử dụng phương thức stopPropagation().
class ParentComponent extends React.Component {
  handleClickParent() {
    console.log('Parent component clicked.');
  }

  render() {
    return (
      <div onClick={this.handleClickParent}>
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  handleClickChild(event) {
    event.stopPropagation();
    console.log('Child component clicked, but propagation stopped.');
  }

  render() {
    return (
      <button onClick={this.handleClickChild}>Click me</button>
    );
  }
}

Trong ví dụ trên, khi người dùng nhấp vào nút trong thành phần con ChildComponent, hàm xử lý sự kiện handleClickChild sẽ được gọi. Tuy nhiên, phương thức stopPropagation() sẽ ngăn chặn lan truyền của sự kiện lên thành phần cha ParentComponent. Do đó, hàm xử lý sự kiện handleClickParent sẽ không được gọi.

Lưu ý rằng để sử dụng các phương thức preventDefault() và stopPropagation(), bạn cần truyền đối tượng sự kiện (event object) vào hàm xử lý sự kiện và gọi phương thức từ đối tượng sự kiện đó (event.preventDefault(), event.stopPropagation()).

Qua đó, bạn có thể ngăn chặn hành vi mặc định và bubbling của sự kiện trong React sử dụng preventDefault() và stopPropagation(), tùy thuộc vào nhu cầu xử lý sự kiện của bạn.

Xem thêm Event Marketing là gì ?

Hàm Mũi Tên (Arrow Function)

Trong Javascript ES6, bạn có thể sử dụng cú pháp ngắn gọn và dễ hiểu để tạo hàm mũi tên:

// Hàm thông thường với tham số
var normalFunction = function(param1, param2)  {
   // Các câu lệnh
};

// Hàm mũi tên với tham số
var arrowFunction = (param1, param2) => {
   // Các câu lệnh
};

// Hàm thông thường không có tham số
var normalFunctionNoParam = function()  {
   // Các câu lệnh
};

// Hàm mũi tên không có tham số
var arrowFunctionNoParam = () => {
   // Các câu lệnh
};

// Nếu hàm chỉ có một câu lệnh
var singleStatementArrowFunction = () => singleStatement;

Sự kiện onClick, onChange,..

Sự kiện onClick yêu cầu một hàm Javascript và không thể trực tiếp gọi một phương thức của Component. Do đó, thường khuyến khích sử dụng hàm nặc danh, trong đó bạn có thể gọi đến phương thức của Component. Dưới đây là ví dụ sử dụng hàm mũi tên với sự kiện onClick:

// Hàm mũi tên với tham số sự kiện
handleClick = (event) => {
  // Xử lý sự kiện
}

render() {
  return (
    <div>
      <button onClick={(event) => this.handleClick(event)}>
        Nhấn vào đây
      </button>
    </div>
  );
}

Trong Javascript ES6, bạn cũng có thể gọi đến phương thức của Component như sau:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // Khởi tạo state và bind phương thức
    this.state = {
      // ...
    };
    this.handleClick = this.handleClick.bind(this);
  }

  // Phương thức của Component
  handleClick() {
    // Xử lý sự kiện
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Nhấn vào đây
        </button>
      </div>
    );
  }
}

// Render
ReactDOM.render(<MyComponent />, document.getElementById("root"));

Cảm ơn bạn đã đọc! 🙌

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now