ReactJS Tutorial - 14 - Binding Event Handlers
ฝัง
- เผยแพร่เมื่อ 2 ธ.ค. 2018
- 📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
In this video, lets learn how to bind event handlers in React components.
"so in this video, I will go over all of them"
What a legend.
This channel is definitely underrated. It deserves more attentions!! Great work man.
I rarely comment on TH-cam but your tutorial and the way you explain is mind blowing i wish if I can support you financially now, but one day I will when I get a job. Thanks a lot for great content
True! Clear and concise! Very helpful.
I hope you already landed your dream job
You explain concepts and ideas so well a mere child will understand you. Great job!
4:30 why event binding is important
5:00 use bind()
6:20 2nd method: use the arrow function
7:57 3rd method (official and mostly used): binding from constructor
9:40 4th method: define the trigged function as an arrow function
4:25 'this' keyword is undefined because this used with a function returns 'window' object on the browser and 'global' object inside nodejs environment. Since 'react strict mode' is enabled, it is returning 'undefined'.
Yes. This is the actual reason it gives undefined.
please elaborate a little
hey please elaborate more
arrow functions don't create their own context so there it worked without binding.
@@akashgupta1353 First of all "this" keyword points the Parent element on which it is called . So when you use a Named function with the "this" keyword inside it , it isn't binded to anything at all ..So the control passes to the "Window" element . So the Window element acts as a parent to the Named function . We see "Undefined" here because we use "Strict mode " in Javascript . What Strict Mode does is, if there is a named function( without any Bind method ) it transfers control to the parent element(window element) as i said ..this action is blocked by the strict mode ..So you see "undefined" in there ...However if you take off the strict mode ,you should see it will return the Window object ... The One Stop Solution to all of this is using arrow functions which takes parent element as the Class and not the window object .
(this) was great explanation
haaha yes (this) was
this.setState({
comment: 'Haha, coding joke'
})
@@moderncloth682 undefined
After a hell lot of reading stackoverflow and blogs, I got everything under the same roof and now every single approach seems relatable. Thanks a ton man! God bless you.
Bruh! the best react tutorial on the whole YT. Small yet detailed videos.
showed all the mistakes we could possibly make and proceeded to fix all of them one by one. Thanks a ton for this tutorial. You are a legend.
FinallFinally!!!! A video that actually helped me and explained it so well! Thank you so much!!
One of the best tutor ( I watched too many tutorials for react but this one is really the best...Even he taught how to deal with logical errors )
I honestly felt like a dumbass until I stumbled upon your channel. You explain everything in such a chill manner in which I can understand easily... highly underrated!
Absolutely exellent.
My threshold to continue with React has been set
from now.
Thank you very much.
One of the best teachers on TH-cam, thanks bruddah!
It's really great how you give examples for both class based and functional components.
Most underrated channel with mind-blowing content with clean and crisp explanation. I rarely comment for a tech YT but this channel is beyond amazing. Many wow factors in the explanation and explanation of the reasons behind the regular usage.
I was exactly looking for something like this and honestly I salute you for the way you explained and structured the code for us to learn. I feel like an expert Reactjs Developer after watching this lol
Excellent brief tutorial that covers topic well in a few minutes time. Thanks.
You guys are professional teachers. Awesome..
What a great explaination man, I understood the basic of react from your course, thanks for sharing
Excellent comprehensive and clear instruction. Very helpful. Thank you.
This course so far is the most intuitive one, I'm loving it !
You made ReactsJs very simple and clean to understand.. Great Work and Kudos
1. Binding in render
2. Arrow function in render
3. Binding in the class constructor
4. Class property as arrow function
Vishwas, you rock man! Thanks so much for these beautiful tutorials. Much appreciated.
After long research, i finally find something which satisfies me. Thanks Man!
One of the best tutorials for Javascript and React library, I must say it`s a great contribution for developer community thankyou so much appreciate it.
Yes. This tutorial is amazing. As a beginner I am getting to learn alot. Very good work Mr Vishwas
Great presentation. I would recommend a variation on binding in the constructor. Instead bind on method creation in the class.
clickHandler = function(){ ... }.bind(this);
This keeps the binding with the function when it is created.
Your video helps me tremendously. Thank you so much. You are a great teacher
Also, Vishwas, this is an excellent series. Well done mate.
Best explanation of bind() ! As a Java and C++ guy in school, it was easy to understand this. OOP for the win
Just Excellent and Simplest way of explaining all cases with sequence and basic example. Keep up great work.
For beginners this video are must watch.. I got lot of confusion but after watching these videos everything is clear now..
such a clean way of teaching!
This is the first video I've seen that effectively explains 'bind(this)' well. Thank you!!
Thank you for providing this content. Great Work.
I think I need to comment on your videos. You are genius and thanks for such an incredible explanations. You deserve more than 5⭐⭐⭐⭐⭐⭐. I was confused with react ideology till your videos saved me lol. Bravooo!!!
Thank you so much! Great Tutorial.
Congratulations my friend, that was a very good tutorial
in 2023 ur videos are the best from all other tutors
This tutorials are very much interested not even single minute am feeling bored and very much detail on each concept thanks my dear.
This is gold!!
Thanks!
Thank you for the amazing and simple explanation!
You deserve more seubscriber and more viewer Sir, i started this reactJS Tutorial series to prepare my self in learning your nextJS Tutorial series. Thank you so much.
This tutorial is very useful for me, Thank you Codevolution !
Great video! Helped me so much! keep up the great work.
You're a legend, man. Keep it up.
sir i like your way of teaching...you explain every concept in a easy way
Arrow functions are very useful in this case. I prefer the last approach.
perfect course , thank you , i'm from thailand
Super clear explanation!
I am going to watch all the videos just because the way you explained
Thanks for all the effort Vishwas! I have been following all your tutorials. They are simple and straightforward. Would like to know if you could help creating a video about basic idea behind Redux/Flux. All the other tutorials out there are really confusing :(
Thank you very much! This course it really useful. I have a question: if I want to change the message from state to state by clicking, what should I do?
you're a savior. Thankyou so much 😊😊🔥🔥
thank you so much for your classes, you are the best teacher
please upload javascript classes
I like your all videos. Thanku for making videos on React
Excellent explanation!
I really love your video brother.
great tutorial, very helpfull, thank you
thanks for the superb tutorial😍
Excellent explanation
thanks a lot for
clearing my doubt
completed video 14. Thank You : -)
i liked ur explanation , thanx a lot man
awesome explanation 🙏
Thank you teacher i like this video is very clear
great tutorial, thnx!
Just PERFECT!
excellent teaching
Hi - Great presentation Gopinath ! I have a question - How come the "this.state " work in video 11 when we updated the count using setState ? Thanks
isn't this video is same as setState method video that you taught earlier .except you taught few other methods to bind.
great work man. thanks
amazing content!!
Very good tutorials
This is an amazing tutorial
This is really very helpfull tutorial
HI Vishwas,
So far i was able to follow you in tutorial. In this Video , i have dpubt as, we have used button event to change message and increment value in previous tutorials . How that function invocation different in here from Event calling?
You are legend man
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions the this keyword always represents the object that defined the arrow function. This is from W3School.
Thank you a lot!
Thank you so much!
Thanks man!!!
how the class properties method (a.k.a the fourth way) works in prodaction now?
Short course but on point.
Amazing Video
i love u so much bro, thanks very much
Reg the 3rd approach - binding in the constructor, what if the clickHandler is to accept some arguments ? we still have to do binding in the render() method ? like this.clickHandler.bind(null, 'arg');
if yes, would that cause any performance issues ?
Super tutorial
8:45 What if I need to pass parameter to the handler function in the third approach?
I don't get it like haven't we already used onClick event listener in the previous video where we made a counter
thank you!
To tackle it either we can bind or use an arrow func!
Thankyou so much....
why you are using the () with clickHandler when you are using the arrow function.
someone please explain....
thanks in advance
The main thing in here was to related the react architecture of components with this, which you have skipped over. That's the main explanation every other thing is pretty common with every tutorial
Why does writing arrow function within class and passing it as event handler, makes it run infinite times??
great video
Thank you