3.4. Xử lý sự kiện với React Event

Trong React, sự kiện được xử lý tương tự như DOM nhưng với một số khác biệt:

• Sự kiện React được đặt trong dấu {} thay vì dấu ngoặc tròn.

• Các hàm xử lý sự kiện không được gọi trực tiếp (truyền tên hàm, không phải kết quả của hàm).

Theo HTML	Theo JSX
<button onclick="fncName()"> Click me! </button>	<button onClick={fncName}> Click me! </button>

Ví dụ sự kiện onClick trong thẻ button

function handleClick() {
  alert('Button clicked!');
}

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

Một số ví dụ về xử lý sự kiện khác:

Sự kiện onChange:

const handleChange = (event) => {
  console.log('Giá trị input: ', event.target.value);
};

return (
  <input type="text" onChange={handleChange} />
);

Sự kiện onInput:

const handleInput = (event) => {
  console.log('Đang nhập: ', event.target.value);
};

return (
  <input type="text" onInput={handleInput} />
);