Complete Intro to React, v6 Handling User Input

[00:00:00]
>> Right now we're getting one set of dogs back from the API, Luna, Bunnahabhain, Olive, Sudo, Beam, these ones. And you're probably all seeing the exact same ones that I am. And if you click Submit, nothing happens. Actually, it does, it'll submit an HTML form, and take you back to the same page, which is not what we want.

[00:00:22] So, we wanna make that work, so that when we click Submit, it is actually going to submit for a new set of pets back from the API. Luckily, this is actually gonna be pretty easy for us, cuz we already made requestPets, once, right? We just wanna make it, so, clicking on the button here, makes that happen.

[00:00:46] Now, one thing you could do, and I'm gonna show you how to do it, but you don't have to type this, we're gonna make it better here in just a second. I could just totally say, onClick here, and then put a function here for it to run on onClick.

[00:01:00] This would work, but here's a problem if we do it on onClick. If I type, I don't know, Seattle, WA right here, and I hit Enter, as a user, I expect that to work, right? If I hit Enter on an input, I expect it to submit the form.

[00:01:18] So, I'm getting ahead of myself, but that's why we put everything in a form. Now we can come up here to the form and says onSubmit. And we can capture both things, right? Cuz if you click a button it submits the form, as well. Okay, so, onSubmit, it's gonna take another function here that has an e.

[00:01:44] I'm gonna put curly braces here, cuz we have to do two things. We do wanna requestPets, right? And that's one thing. But, if you remember, when you submit a form, you have to prevent it from submitting, or it's actually going to refresh the page. That's just old school HTML forms for you.

[00:02:03] So, I imagine many of you have done this before, and we're gonna do it now you're just gonna say e. So you can see it's literally the top one here, preventDefault. That's gonna prevent it from submitting the form or bubbling up the event, blah, blah, blah. I imagine that's not new for most people coming out this, but it might be.

[00:02:29] Suffice to say, it's gonna prevent the page refresh from happening. So, now, if we go back over here and I say, I wanna look at dogs that are Havanese and I click Submit. I get Luna and Sheff. Or if I wanna look at any dogs from Salt Lake City, UT.

[00:02:57] Julietta and Talbert. The one thing I'll say about this location is it's very inexact. Just so you know, I really half-heartedly implemented this. But I mean you can type Seattle there, and you'll get all pets from Seattle. The reason why I say this, I noticed this Julietta just showed up for both Salt Lake City and Seattle.

[00:03:21] Obviously, it's from one or the other, and I don't know which one it is, but that's why, it's cuz I, definitely, half-heartedly did that. It's just doing full text search. It's not actually matching locations. Okay, So, one thing I wanted to talk a little bit about here, cuz we're not gonna go a whole lot more into it.

[00:03:46] Let's go to Handling User Inputs. We did onSubmit, I showed you onClick. But there's actually a lot of these on blanks, these ways to handle user interactions. So, if you click here, there's a list of them on the React docs. And you can see there's a lot of them, right?

[00:04:06] You can handle Mouse Overs, you can handle Touch Events. You can handle Cut, Copy, Paste Events. You can handle Animation Events. There's a lot of stuff that you can handle. Let's just look at, Touch Events. OnTouchCancel, onTouchEnd, onTouchMove, onTouchStart. There's a lot of fine granular points where you can hook in and listen to events here.

[00:04:31] And if we wanted to do that here, we can just say, hey, we wanna do something special on this input. We can say on, you can see here I have a lot onCutCapture, right? And then I would or even looping just to onCut. I would do console.log. So now if I come over here, I think this should work.

[00:05:01] I've never tried it, but if I run a cut, you can see that it actually captured my cut event. That's pretty cool, right? So I just want you to be aware of those, those are all out there. Anytime that you need to capture one of those events, just do that.

[00:05:20] Something else that probably bears mentioning. You look at this and he's like, hey, that looks like an event object that the DOM is giving me. But is it? And the answer is, sorta, [LAUGH] it's sorta because it's actually technically a react synthetic event. Which for all intents and purposes, to you as the person writing code, you don't have to care what it is.

[00:05:46] It looks like an event, it acts like an event, it talks like an event, to you, it looks like a native DOM event. But in this particular case, it actually is react wrapping that, that's mimicking the API. The only reason I just want you to know this, when you're typing them with TypeScript, you do have to kind of like finagle around that a little bit.

[00:06:08] But you can read the MDN Docs for events, and these look and act just like those.