Làm thế nào để bạn chặn callback của 1 event trong React?

Để chặn callback của một event trong React, bạn có thể sử dụng phương thức preventDefault() hoặc stopPropagation() trên đối tượng event được truyền vào hàm xử lý sự kiện (event handler).

Sử dụng preventDefault()

Phương thức preventDefault() được sử dụng để ngăn chặn hành vi mặc định của một sự kiện. Điều này hữu ích khi bạn muốn chặn các hành vi mặc định của trình duyệt, như việc gửi một form khi nhấn submit, hoặc chuyển trang khi nhấn vào một liên kết.

Ví dụ:

function handleSubmit(event) {
  event.preventDefault();
  // Logic xử lý khi form được submit
}

return (
  <form onSubmit={handleSubmit}>
    {/* Các thành phần của form */}
    <button type="submit">Submit</button>
  </form>
);

Trong ví dụ trên, preventDefault() được gọi trong hàm handleSubmit để ngăn chặn việc form được gửi đi một cách mặc định.

Sử dụng stopPropagation()

Phương thức stopPropagation() được sử dụng để ngăn chặn việc lan truyền của một sự kiện từ một phần tử con lên các phần tử cha của nó trong DOM. Điều này hữu ích khi bạn muốn chặn một sự kiện ở một phần tử con mà không muốn sự kiện đó ảnh hưởng đến các phần tử cha.

Ví dụ:

function handleClickChild(event) {
  event.stopPropagation();
  // Logic xử lý khi phần tử con được click
}

function handleClickParent() {
  // Logic này sẽ không được thực thi nếu phần tử con được click
}

return (
  <div onClick={handleClickParent}>
    <button onClick={handleClickChild}>Click Me</button>
  </div>
);

Trong ví dụ trên, stopPropagation() được gọi trong hàm handleClickChild để ngăn chặn việc sự kiện click trên nút bấm lan truyền lên phần tử cha, do đó hàm handleClickParent sẽ không được thực thi khi nút bấm được click.

Sử dụng preventDefault() và stopPropagation() là hai cách phổ biến để chặn callback của một event trong React, tùy thuộc vào hành vi mà bạn muốn chặn.