React Events
1.React Events là gì?
React Events là các sự kiện, thao tác, hành động của người dùng với giao diện ứng dụng trong React.Nó bao gồm các sự kiện như click, change, mouseover…
Các sự kiện trong React cũng tương tự như sự kiện trong HTML.Tuy nhiên cách viết trong React và HTML có chút khác nhau.Trong React sự kiện click được viết là onClick còn trong HTML viết là onclick.Xử lý sự kiện trong React viết là: onClick = { function_Events } còn trong HTML viết thành onclick= " function_Events() ".
2.Cách xử lý sự kiện Event trong React.
Cú pháp sự kiện Events trong React viết như sau:
onClick={ function_Events }
- onClick: là tên sự kiện:
- function_Events: là hàm xử lý sự kiện, được viết bên trong dấu ngoặc nhọn { }.
Cách xử lý sự kiện sử dụng hàm Function trong React.
Khi người dùng click vào nút Button và hiện nội dung thông báo code được viết như sau:
Ví dụ 1
import React, {Component} from "react";
function Show_Information(){
alert("You have clicked this Button.")
}
export class Events_Demo extends Component
{
render()
{
return(
<div>
<h2>Chương trình Demo sự kiện Events trong React</h2>
<p>Ví dụ: Sự kiện onClick trong React</p>
<button onClick={Show_Information}>Show Information</button>
</div>
);
}
}
Cách xử lý sự kiện thông qua Component trong React.
Giả sử chúng ta tạo một Component Employee và có sự kiện onClick vào nút Button của Component Employee để hiện nội dung thông báo.
Ví dụ 2
import React, {Component} from "react";
function Employee(){
const showMessage = ()=>{
alert("This is Employee information.");
}
return(
<button onClick={showMessage}>Show Employee Information</button>
);
}
export class Events_Demo extends Component
{
render()
{
return(
<div>
<h2>Chương trình Demo sự kiện Events trong React</h2>
<p>Ví dụ 2:Sự kiện onClick của Component trong React</p>
<Employee />
<p>Học lập trình React tại website: https://ihoclaptrinh.com </p>
</div>
);
}
}
Cách xử lý sự kiện trong React có tham số, đối số.
Để truyền tham số cho trình xử lý sự kiện, trong React sử dụng hàm mũi tên => (arrow function).
Ví dụ 3
import React, {Component} from "react";
function Employee2(){
const showMessage2 = (a)=>{
alert(a);
}
return(
<button onClick={()=> showMessage2("Show Employee2 Information")}>Show Employee2 Information</button>
);
}
export class Events_Demo extends Component
{
render()
{
return(
<div>
<h2>Chương trình Demo sự kiện Events trong React</h2>
<p>Ví dụ 3: Cách xử lý sự kiện có tham số trong React</p>
<Employee2 />
<p>Học lập trình React tại website: https://ihoclaptrinh.com </p>
</div>
);
}
}