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 các sự kiện của người dùng.
React có các sự kiện tương tự như HTML: Nhấp vào, Thay đổi, MouseOver, v.v.
Thêm sự kiện
Các sự kiện phản ứng đượ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 niềng răng xoă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
vào 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ố
Để chuyển một đối số cho một 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ột tham số cho hàm shoot
, sử dụng hàm 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 />);
Phản ứng đối tượng sự kiện
Trình xử lý sự kiện có quyền truy cập vào sự kiện React đã kích hoạt chức năng.
Trong ví dụ của chúng tôi, sự kiện là sự kiện "nhấp chuột".
Ví dụ:
Hàm 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 nhìn vào hình thức trong một chương sau.