All language subtitles for 032 Exercise_ Event Binding_en

Hey, it's Andre here.

I want to do a quick exercise with you based on what we've learned so far.

This is going to be a little tricky.

So let's see how you do.

I've created here using coast sandbox.

Just a simple basic component.

It's an app component.

And here we have our constructor.

And the important part is this render we're rendering for bundes.

As you can see here, very beautiful page.

I know.

Now, here we actually have four bundes with different ways that we're assigning the handle click function.

The first one actually runs the function like this because of these brackets.

The second one, Hando, quick one, looks like this.

It's defined right here inside of the component.

And it logs.

Button one clicked.

The next one, Handal click two is up here.

It's saying this dot handle click two equals this dot handle, click one dot bind, remember, had to

click.

One is here and binds to this.

And then the next one Handal click.

Three is a function or because this is part of a class.

It's a method that's using arrow functions.

Okay, so what do you think is going to happen?

Remember, this is just a simple component.

All we have is these click handlers.

We actually have one, two and three and all three of them are being used in different way.

I want you to predict what's going to happen first.

I'm going to refresh the page that I'm going to click on one.

Then click on to click on three.

And then click on four.

I want to pause the video and write down what you think is going to show up inside of the console.

So I'm going to open up the console over here and we're gonna go one by one.

So write down what you think's going to happen.

This is a little tricky.

So if you don't get her 100 percent.

Don't worry.

You're not a terrible developer.

We're just learning.

Ready?

All right.

Time for the answer.

I'm going to refresh the page.

All right.

And we see you right away that there's a console.

So let's click over here.

And it looks like button one was clicked.

But I didn't click this button, which just happened.

Well, we're invoking the function whenever we render.

Right.

So here when React renders this.

It runs this function.

Because, well, we call it right here.

This is why we don't call a function when it's an event handler.

We assign it a function so that when the event happens, it actually runs.

So if I click one here, no, nothing happens because there is nothing assigned to it.

This is just we pretty much just said, hey, just run the handle click function.

That's it.

So we don't want to do that.

What about the second one?

Let's click on to here.

I get button one click.

Why is that?

Well, because we now assigned handle click one, which is over here.

And we ran this awesome.

Now if I change this, to have this keyword in it, you see that this refreshed.

And this initially is the app.

But as soon as I click on bond to.

I get undefined.

And this is something that we talked about before with the this keyword.

Now this undefined over here.

If we wrote it like this, would actually refer to the actual button, the actual element here.

All right, enough of that, let's go back let's click on this one over here.

Click three.

Ready?

Well, let's click on to first and then click three.

Button one clicked.

Why is that?

Well, Handal, click to.

And by the way, I don't know if you can hear this, but it is raining really, really hard outside.

So if you can't hear that.

Sorry, but I swear, it's just the rain.

All right.

So Handal click to hear is equal to this dot handle click one, which is this function and we bind this

year.

Now we run this console lock.

But if I change this to.

This now.

And I click on three.

Look at that.

This is now the app.

So this is what we're doing with Bonnie, we're making sure that, hey, this is going to equal the

app because we're going to use it later.

Awesome.

All right.

Final one.

Let's go back to what we had before.

What happens when I click here?

When I click on for.

I get button three clicked because handle click three, which is right over here.

While this just two runs.

If I now console log this and I click run.

Lets click for here.

Look at that.

I get the app without having to do this ugly bind up here that often confuses people.

The Biery of air functions.

All right.

Did you get that if you didn't.

Don't worry.

These are pretty much the rules once you memorize them.

That's it.

It's fairly simple.

So I'll see you in the next video.