Sự kiện React
Cũ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 chuột, thay đổi, di chuột qua, v.v.
Thêm sự kiện
Các sự kiện React được viết theo cú pháp camelCase:
onClick
thay vì onclick.
Các 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>
Thí dụ:
Đặt shoothàm bên trong
Footballthành phần:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Được chứng nhận!
$ 95 GHI DANH
Chuyển đối số
Để chuyển một đối số đến một trình xử lý sự kiện, hãy sử dụng một hàm mũi tên.
Thí dụ:
Gửi "Mục tiêu!" làm tham số cho shoot
hàm, 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>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Đối tượng sự kiện phản ứng
Bộ 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".
Thí 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>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Điều này sẽ hữu ích khi chúng ta xem xét Biểu mẫu trong chương sau.