React Event Handling - MicroBytes 2020

Описание: Handling events with React elements is very similar to handling events on DOM elements. But there are some syntax differences. React uses camelCase to define events such as onClick.

When you define a component using an ES6 class, a common pattern is for an event handler to be a method on the class.

You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.

This is yet another reason why using function-based components instead of class-based is now recommended by React.
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/...

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codest...
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development - Beginners Roadmap (2020) -    • Web Developer Roadmap 2020 | A Guide To St...  
Playlist: Web Development For Beginners -    • Web Development - Beginners Roadmap (2019)  
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter:   / codestackr  
Instagram:   / codestackr  
Facebook:   / codestackr  
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #ReactJS #React