Previous Lecture Complete and continue  

  Component Methods

  1. Creating and calling component class methods
  2. Component or browser events
  3. Mouse events
  4. Declaring events (Button counter example)
  5. Button onClick event

Button counter source code and preview: http://plnkr.co/edit/0wbmK9?p=preview

Welcome to Module number 3 of React Foundation. In this module, we will cover probably one of the most important things, functionalities that you would expect from a web application, it's the user input. But, before we can switch to actual form elements, lets see some examples how we can create class methods, or component methods.

So let's say getA is a method, this is the syntax that we would use. And then, we can simply use this.getA and then invoke it inside of our JSX by using the curly braces, okay? So, bear with me, it will come in handy in the component events, or browser events. So, the browser events, they are supported by React. Most of the default standard browser events, they are all supported. This is just for some of the mouse or track pad events. There are much more events for touches, which we're gonna use for the responsive design.

There are some other events as well, so check the documentation, but we will just start with these events and then they all use the same approach. Basically what you do, you would need multiple things before we can actually define them, so let's set up a state, let's make the counter zero. We will be building that button.

Remember that button in the previous module? You click on it, and the counter increases. That's what we're building. So we will be implementing click. This is what we need to do. The click would be the method, so that's why we discussed how to create a class method, so click would be the class method. Later in the render we'll be using that, but for now, we need to bind it. So what is binding doing?

Basically, when you say this.click.bind(this) you're basically creating a new function. It's gonna have all the properties, all the functionality of this.click except that, that new function, it will have the value of T-H-I-S, the value of this would be whatever you are passing to bind. Okay, so we do that in constructor because when we pass the definition of the click function, we don't know what the value of this would be, okay? We need to ensure that the value of this would always be this component, the instance of a component. Okay, why? Because inside of click, we are using setState.

So we are using setState, and then we're getting the current value from the state, incrementing it by using plus plus, and that's gonna be our new value of the counter and the view will be re-rendered. So how do we define? The way to define is to use onClick equals, and this is very important, write it down or remember this, you need to pass the definition. So this.click, it's a definition, it's not an invocation. It could be only an invocation if what are you returning is another function, okay?

In our case, we used bind in the constructor, so it's sort of a function, but in the end it's still a definition because bind will return a definition of click. So, it's okay, just remember, if you're using parentheses inside of the curly braces it's probably bad, okay? And then just put that attribute, put that property in your element, in the JSX. In this case, it's a button, and then we're using the state to actual display of the number of times we've clicked on it. Let's look how it all looks together in the plnkr.

0 comments