Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:22Length:2 hours
Practical react fundamentals 400x277
  • Overview
  • Transcript

4.3 Handling Events

The point of most web apps is to handle interaction with the user. So, in this lesson, you'll learn how to wire up events by executing some code when the user clicks on a button. You will also learn about a nifty trick to enable child-to-parent communication through bound function calls.

4.3 Handling Events

In this lesson we're gonna touch on a variation of a concept that we touched on in a previous lesson where we started to talk about inter-component communication. So previously when we created our hangman component, we were able to pass data into our game board using this target word, which kind of equates to sending properties back and forth from our parent down to our child. So that's how we can send data. But what happens if we want to start handling events? So, as we've talked about a little bit in previous lessons, most of the interaction for this game is gonna be happening with the button pad. They're gonna be clicking on these buttons, and then we want things to happen. We want things to happen not only within the button pad itself on these buttons, but we also want things to happen on the board. And we're gonna continue to add things to this board as we go, but we wanna be able to update the letters, we wanna be able to update the buttons and we want these things to happen kind of the hub of where all this is gonna take places right here in the game board. So now what I wanna show you is a mechanism that will allow you to handle events in a child component and then have those events kind of bubble up to the parent. And we're gonna do that with some very simple JavaScript concepts really just using functions. So let's kind of start to set the basic setup of this up so that we can get going and actually start to use it in the upcoming lessons. So what I wanna do is I want to have a function in here that we're going to use to do a lot of the actual game logic. And this is gonna be triggered when a user clicks one of the buttons. So let's go ahead and simply call this check letter for now. So this is going to happen when a user clicks a button. I wanted to run this function and it's gonna do a lot of checking does the letter exist within the letters for the target word, do I need to change the button colors, do I need to reduce the count of the amount of moves that are remaining, and all this sort of good stuff. All of that's gonna be contained within this CheckLetter function, but for now, I'm just simply going to put an alert in here. And I'm gonna say, Gameboard checkLetter, just so that we know that this has been fired. So what I want to do is I want to make this accessible this function accessible in my button pad. So what i'm gonna do first is I'm going to create a constructor and I am going to go ahead and go ahead and set this up like I normally would because it's once again, just a good practice to get into. Now, what I would like to do now is I would like to set up this function so that I can use it elsewhere. So what I want to do is I want to create kind of like a handler, if you will. So I'm gonna say this.checkletterhandler. Now what this is going to be as it's going to be a function that's gonna be bound to this function here. But then I could pass that around to different places within my application into other components not just this component. So the way that we're gonna do that is we're gonna set that equal to this.checkletter. But what I wanna do is I wanna use the bind function to be able to create a bond function to this function here so that wherever I pass this check letter handler, it's really gonna be using the actual function here that we're dealing within the game board component. So we're going to bind it to this. Okay, so now what I have is this handler, now I can use in other places of my code. Well, like I said, I want to be able to pass this into my button pad, so let's go ahead and start to do that. Well, I'm gonna handle this via properties like I've done before. So I'm gonna to say maybe I'll call this letter click. So this is gonna be the letter click attribute if you will, and I wanna set this equal to this.checkLetterHandler, just like that. So now I'm taking this bound instance of this CheckLetter function and I'm passing it into my button pad component. So now I can come back up to my button pad and just like we've done before, we're passing this in through properties. So I'm gonna come down here and add another property to my state here. And we'll call this the letterClickHandler. And I'm going to set that equal to props.letterClick just like that. So now I have a hold of this reference to this function that I can use anywhere within my button pad. So basically what's gonna happen now is anytime a user clicks that button, then I want to actually fire off that function. So let's go ahead and bring that down here to where we're actually creating these buttons, which is happening right over here where I'm creating a new instance of this button. And what I can do now is I can handle click events on elements within my components. So in this case, what I'm gonna do is I'm going to use the onClick handler right here. And so I can say, when this is clicked, what I wanna do is I wanna execute some code here and I'm gonna execute this lambda right here with no input. And I'm simply gonna say, anytime this button is clicked, I simply wanna say, this this.letterClickHandler, and then we'll go ahead and pass in a letter, just like that. So now you can see we're using this on click attributes. We're going to execute this letterClickHandler right here, passing it in the letter. Now if we have done this correctly, and actually I'll come down here to my game board and I'm passing in this letter. So I'm running this game board check letter right here and I'm gonna go ahead and add this letter onto the end. I'm gonna concatenate it on there just so that you can see it actually functions. So if I save that, and I hop back over to my code, everything seems to have been reloaded. So if I click on K I'm gonna get an error here. And what's interesting about this is that I did do a little bit of a mistake, but it's kinda easy to start to debug here. So it's saying here that there is no letterClickHandler. It's not actually a function. And the reason it's not actually a function is because when I am using this in my button pad, it's called the letterClickHandler but it's part of the state. So what I have to do is I have to say this.state.letterClickHandler like that, so let's go ahead and hit save, and we'll come back over to Chrome when we reload enough, I click K, I get an alert saying the gameboard check letter K. So now you can see that by creating this bound function in my parent component, I can now pass instances of this handler to different components that are child components just like this by sending properties wherever it is I want to send them. And then I can use those functions that I've passed around as properties in these other components. And this is a pretty nifty trick to be able to take events that happen in children and then do some sort of action in the parent component.

Back to the top