- Create Button
- Create function for click event - handleClick
- Link the button with click function
Let's add a button below <h2> Home Page <h2> , inside Home.js
code will below
<button>Click Me</button>
Now write click function
const handleClick = () => {
console.log('Hello World Click');
}
Here 'const' variable for function
handleClick = name of function
then assign the function
() => {
console.log('Hello World Click');
}
Note , we don't have parameters, that's why () before =>
3. Link the function with Click button, event 'onClick'
Note: if we pass function call instead of reference, function will call and write "Hello World Click" inside console
<button onClick={handleClick()}>Click Me</button>
you can check taking console of the browser.
It will be called when page loaded. When you click, click function won't be called also.
This is not what we need, we need to invoke 'handleClick' function when you click the button.
How to pass reference ? --> just pass the name of the function
<button onClick={handleClick}>Click Me</button>
Note: if you pass function name with (), it's calling function
To call at event - pass only name - without () - reference of the function
final code looks like
------------------------------------------------------------------
import React, { Component } from 'react';
const handleClick = () => {
console.log('Hello World Click');
}
class Home extends Component {
render() {
return (
<div className='home'>
<h2>Home Page</h2>
<button onClick={handleClick}>Click Me</button>
</div>
);
}
}
---------------------------------------------------------------
Create function with parameters
1. Create a new button
2. Create new function with parameters -> handleClickWithPara
3. Link function with button click event
const handleClickWithPara = (name) => {
console.log('Hello '+ name)
}
function will take parameter 'name' and log in console after concatenate
Tricky part is in the calling parameter. If you can remember top,
we can call the function with giving value itself inside call
<button onClick={handleClickWithPara('mario')}>Click With Para</button>
This will print "Hello mario" inside Console and if you click the new button "Click With Para" , nothing will happen as usual, explain in above
Now how to call this.
we need to make an anonymous function inside dynamic call , - inside mustache
1. we need to wrap "handleClickWithPara('mario')" inside an anonymous function
2. So let's remove above from onClick={handleClickWithPara('mario')} and let's add arrow function as basic step
3. let's add arrow function as basic step
4. () => {}
5. after adding it will look like
6. onClick={() => {}}
7. Nothing will happen in browser or console, as nothing inside
8. IN simple, "() => {}" is function fire when user click "Click With Para" button
9. To understand bit, let's add log statement. () => {console.log('Hello')}
10. onClick={() => {console.log('Hello')}}
11. This will print 'Hello' inside console , when you click new button "Click With Para"
12. This is an anonymous function, where you don't keep in const. it will fire when the click event raised, as we have linked to "onClick" event
13. Now we can add our handleClickWithPara call inside, replacing console.log statement
14. {() => {handleClickWithPara('mario')}}
<button onClick={() => {handleClickWithPara('mario')}}>Click With Para</button>
Now you can see "Hello mario" print when new button "Click With Para" clicks
15. We don't need inner curly braces, as we have only one line. So let's remove.
<button onClick={() => handleClickWithPara('mario')}>Click With Para</button>
16. But still we need outer curly braces as its for dynamic call
To learn more
first parameter will be the event object which will be assign automatically as a parameter.
we can check this adding 'e' for our function without parameter -> handleClick
1. we can add 'e' as parameter and print 'e' inside console log
const handleClick = (e) => {
console.log('Hello World Click',e);
}
2. Now you can see the full output inside console in browser
3. So when come to second scenario, the annnonymous function get access to this event 'e' object automatically
4. Then we can pass event as above mention as access fields. eg: target
This will print when click new button.
"Hello mario <button>Click With Para</button>"
your new coding wil look like
-------------------------------------------------------------
const handleClick = (e) => {
console.log('Hello World Click',e);
}
const handleClickWithPara = (name,e) => {
console.log('Hello '+ name, e.target)
}
class Home extends Component {
render() {
return (
<div className='home'>
<h2>Home Page</h2>
<button onClick={handleClick}>Click Me</button>
<button onClick={(e) => handleClickWithPara('mario',e)}>Click With Para</button>
</div>
);
}
}
------------------------------------------------------------------
No comments:
Post a Comment