In the lesson, I will guide you “How to use Event (event) in ReactJS”. It’s also not much different when you use events in ReactJS compared to using events in Javascript.
- In Javascript you will handle events in a function, while in React you will handle events in a Component method.
ReactJS Events
React is a Javascript-based library, which basically doesn’t have much difference in event handling between ReactJS and Javascript. With Javascript, when an event occurs, a function will be called to execute. But with React, when an event occurs, there will be a Component method called.
OK, let’s first see a simple example:
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 class="__cf_email__" href="/cdn-cgi/l/email-protection">[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 class="__cf_email__" href="/cdn-cgi/l/email-protection">[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 class="__cf_email__" href="/cdn-cgi/l/email-protection">[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> |
Result:
Arrow Function
With Javascript ES6 syntax you can create an arrow function , very short and easy to understand:
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 must call a Javascript function, it cannot call a Component method directly. So onClick should call an anonymous function, and inside this anonymous function you can call the Component method:
Arrow function with event parameter:
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> |
With Javascript ES6 you can also call Component ‘s method in the following way:
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> |
Or:
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> |
Thank you for reading! (bow)