Trong bài học mình sẽ hướng dẫn bạn “Làm sao để sử dụng Event (sự kiện) trong ReactJS”. Cũng không có nhiều khác biệt khi bạn sử dụng các event trong ReactJS so với sử dụng các event trong Javascript.
- Trong Javascript bạn sẽ xử lý sự kiện trong một hàm, còn trong React bạn sẽ xử lý sự kiện trong một phương thức của Component.
ReactJS Events
React là một thư viện dựa trên Javascript, về cơ bản không có nhiều khác biệt trong cách xử lý sự kiện giữa ReactJS và Javascript. Với Javascript, khi sự kiện xẩy ra một hàm sẽ được gọi để thực thi. Nhưng với React, khi sự kiện xẩy ra, sẽ có một phương thức của Component được gọi.
OK, trước hết hãy xem một ví dụ đơn giản:
File onClick-example.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <span class="token keyword">class</span> <span class="token class-name">CurrentTime</span> extends <span class="token constant">React</span><span class="token punctuation">.</span><span class="token constant">Component</span> <span class="token punctuation">{</span> constructor<span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> var now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constant">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> this<span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> currentTime<span class="token punctuation">:</span> now<span class="token punctuation">.</span>toString<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">A</span> method of <span class="token constant">CurrentTime</span> component refreshCurrentTime<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> var now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constant">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> this<span class="token punctuation">.</span>setState<span class="token punctuation">(</span><span class="token punctuation">{</span> currentTime<span class="token punctuation">:</span> now<span class="token punctuation">.</span>toString<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> render<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span><span class="token constant">Current</span> <span class="token builtin">Time</span><span class="token punctuation">:</span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>currentTime<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> this<span class="token punctuation">.</span>refreshCurrentTime<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token constant">Refresh</span> <span class="token constant">Current</span> <span class="token builtin">Time</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Render</span> <span class="token constant">ReactDOM</span><span class="token punctuation">.</span>render<span class="token punctuation">(</span><span class="token operator"><</span><span class="token constant">CurrentTime</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>getElementById<span class="token punctuation">(</span><span class="token string">"currenttime1"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
File onClick-example.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token operator"><</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span> <span class="token operator"><</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span> <span class="token operator"><</span>title<span class="token operator">></span><span class="token constant">ReactJS</span> <span class="token constant">Event</span><span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>/umd/react.production.min.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>/umd/react-dom.production.min.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>/babel.min.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>style<span class="token operator">></span> <span class="token comment">#currenttime1 {</span> border<span class="token punctuation">:</span><span class="token number">1</span>px solid blue<span class="token punctuation">;</span> padding<span class="token punctuation">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span> margin<span class="token operator">-</span>top<span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>h3<span class="token operator">></span><span class="token constant">ReactJS</span> <span class="token constant">Event</span><span class="token punctuation">:</span> onClick<span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"currenttime1"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"onClick-example.jsx"</span> type<span class="token operator">=</span><span class="token string">"text/babel"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span> |
Kết quả:
Arrow Function
Với cú pháp Javascript ES6 bạn có thể tạo một arrow function (Hàm mũi tên), rất ngắn gọn và dễ hiểu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Normal</span> function with parameters var myfunc <span class="token operator">=</span> function<span class="token punctuation">(</span>param1<span class="token punctuation">,</span> param2<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Statements</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Arrow</span> function with parameters<span class="token punctuation">.</span> var arrfunc <span class="token operator">=</span> <span class="token punctuation">(</span>param1<span class="token punctuation">,</span> param2<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Statements</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Normal</span> function without paramters<span class="token punctuation">.</span> var myfunc2 <span class="token operator">=</span> function<span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Statements</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Arrow</span> function without parameters<span class="token punctuation">.</span> var arrfunc2 <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Statements</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">If</span> function have only one statement<span class="token punctuation">.</span> var arrfunc2 <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> singleStatement<span class="token punctuation">;</span> |
onClick, onChange,..
onClick phải gọi đến một hàm Javascript, nó không thể gọi trực tiếp đến một phương thức của Component. Vì vậy onClick nên gọi đến một hàm nặc danh (anonymous), và bên trong hàm nặc danh này bạn có thể gọi đến phương thức của Component:
Arrow function với tham số event:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">A</span> method of <span class="token constant">Component</span> with event parameter<span class="token punctuation">.</span> refreshCurrentTime<span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span> var now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constant">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> this<span class="token punctuation">.</span>setState<span class="token punctuation">(</span><span class="token punctuation">{</span> currentTime<span class="token punctuation">:</span> now<span class="token punctuation">.</span>toString<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> render<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span><span class="token constant">Current</span> <span class="token builtin">Time</span><span class="token punctuation">:</span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>currentTime<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> this<span class="token punctuation">.</span>refreshCurrentTime<span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token constant">Refresh</span> <span class="token constant">Current</span> <span class="token builtin">Time</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Với Javascript ES6 bạn cũng có thể gọi đến phương thức của Component theo cách sau:
File onClick-example3.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">A</span> method of this <span class="token constant">Component</span><span class="token punctuation">.</span> refreshCurrentTime<span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span> var now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constant">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> this<span class="token punctuation">.</span>setState<span class="token punctuation">(</span><span class="token punctuation">{</span> currentTime<span class="token punctuation">:</span> now<span class="token punctuation">.</span>toString<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> render<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span><span class="token constant">Current</span> <span class="token builtin">Time</span><span class="token punctuation">:</span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>currentTime<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>this<span class="token punctuation">.</span>refreshCurrentTime<span class="token punctuation">.</span>bind<span class="token punctuation">(</span>this<span class="token punctuation">,</span>event<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token constant">Refresh</span> <span class="token constant">Current</span> <span class="token builtin">Time</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Hoặc:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <span class="token keyword">class</span> <span class="token class-name">CurrentTime</span> extends <span class="token constant">React</span><span class="token punctuation">.</span><span class="token constant">Component</span> <span class="token punctuation">{</span> constructor<span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> var now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constant">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> this<span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> currentTime<span class="token punctuation">:</span> now<span class="token punctuation">.</span>toString<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token punctuation">(</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token punctuation">)</span> this<span class="token punctuation">.</span>refreshCurrentTime <span class="token operator">=</span> this<span class="token punctuation">.</span>refreshCurrentTime<span class="token punctuation">.</span>bind<span class="token punctuation">(</span>this<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">A</span> method of this <span class="token constant">Component</span> refreshCurrentTime<span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> var now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constant">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> this<span class="token punctuation">.</span>setState<span class="token punctuation">(</span><span class="token punctuation">{</span> currentTime<span class="token punctuation">:</span> now<span class="token punctuation">.</span>toString<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> render<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span><span class="token constant">Current</span> <span class="token builtin">Time</span><span class="token punctuation">:</span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>currentTime<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>this<span class="token punctuation">.</span>refreshCurrentTime<span class="token punctuation">}</span><span class="token operator">></span> <span class="token constant">Refresh</span> <span class="token constant">Current</span> <span class="token builtin">Time</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">/</span> <span class="token constant">Render</span> <span class="token constant">ReactDOM</span><span class="token punctuation">.</span>render<span class="token punctuation">(</span><span class="token operator"><</span><span class="token constant">CurrentTime</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>getElementById<span class="token punctuation">(</span><span class="token string">"currenttime1"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Cảm ơn các bạn đã đọc! (bow)