Sự kiện phản ứng
Giống như các sự kiện HTML DOM, React có thể thực hiện các hành động dựa trên sự kiện của người dùng.
React có các sự kiện tương tự như HTML: nhấp chuột, thay đổi, di chuột qua, v.v.
Thêm sự kiện
Các sự kiện React được viết bằng cú pháp CamelCase:
onClick
thay vì onclick
.
Trình xử lý sự kiện React được viết bên trong dấu ngoặc nhọn:
onClick={shoot}
thay vì onclick="shoot()"
.
Phản ứng:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Ví dụ:
Đặt chức năng shoot
bên trong thành phần Football
:
function Football() { const shoot = () => { alert("Great Shot!"); } return ( <button onClick={shoot}>Take the shot!</button> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Football />);
Được chứng nhận!
$95 ĐĂNG KÝ
Truyền đối số
Để truyền đối số cho trình xử lý sự kiện, hãy sử dụng hàm mũi tên.
Ví dụ:
Gửi "Mục tiêu!" làm tham số cho chức năng shoot
, sử dụng chức năng mũi tên:
function Football() { const shoot = (a) => { alert(a); } return ( <button onClick={() => shoot("Goal!")}>Take the shot!</button> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Football />);
Đối tượng sự kiện phản ứng
Trình xử lý sự kiện có quyền truy cập vào sự kiện React đã kích hoạt hàm.
Trong ví dụ của chúng tôi, sự kiện là sự kiện "nhấp chuột".
Ví dụ:
Chức năng mũi tên: Gửi đối tượng sự kiện theo cách thủ công:
function Football() { const shoot = (a, b) => { alert(b.type); /* 'b' represents the React event that triggered the function, in this case the 'click' event */ } return ( <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Football />);
Điều này sẽ có ích khi chúng ta xem xét Biểu mẫu trong chương sau.