Câu hỏi phỏng vấn React.js
Câu hỏi

Mô tả cách xử lý các event trong React?

Câu trả lời

Trong React, việc xử lý các sự kiện (events) được thực hiện thông qua cơ chế tương tự như xử lý sự kiện trong HTML thuần túy, nhưng có một số khác biệt quan trọng và cải tiến nhất định. Dưới đây là cách xử lý các sự kiện trong React:

Đặt tên sự kiện

Trong React, tên của các sự kiện được viết theo cú pháp camelCase thay vì lowercase như trong HTML thuần túy. Ví dụ, thay vì sử dụng "onclick" trong HTML, bạn sẽ sử dụng "onClick" trong JSX của React.

Truyền hàm làm trình xử lý sự kiện

Trong React, bạn truyền một hàm vào thuộc tính của sự kiện để xử lý sự kiện đó. Hàm này có thể được định nghĩa trực tiếp trong JSX hoặc được tham chiếu từ một phương thức của class component.

Ví dụ với Function Component

javascript Copy
function MyComponent() {
  function handleClick() {
    console.log('Button clicked');
  }

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

Ví dụ với Class Component

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

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

Truyền tham số cho trình xử lý sự kiện

Đôi khi bạn cần truyền tham số cho trình xử lý sự kiện. Trong React, bạn có thể làm điều này bằng cách sử dụng một arrow function hoặc hàm bind.

Sử dụng Arrow Function

javascript Copy
<button onClick={(e) => this.handleClick(e, someData)}>
  Click me
</button>

Sử dụng .bind()

javascript Copy
<button onClick={this.handleClick.bind(this, someData)}>
  Click me
</button>

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

Để ngăn chặn hành vi mặc định của một sự kiện trong React, bạn có thể gọi preventDefault() trên đối tượng sự kiện được truyền vào hàm xử lý sự kiện.

javascript Copy
function handleSubmit(e) {
  e.preventDefault();
  console.log('Form submitted');
}

// Trong JSX
<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

Tổng kết

Xử lý sự kiện trong React tương tự như trong HTML thuần túy nhưng với một số cải tiến như cú pháp camelCase cho tên sự kiện, sử dụng hàm để xử lý sự kiện, và khả năng truyền tham số cho trình xử lý sự kiện. Việc sử dụng các hàm xử lý sự kiện giúp tạo ra các ứng dụng React linh hoạt và dễ bảo trì.

middle

middle

Gợi ý câu hỏi phỏng vấn

junior

useState() trong React là gì?

middle

Khi nào nên sử dụng useState so với useReducer trong React?

junior

State trong React là gì?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào