Did you like how we did? Rate your experience!

Rated 4.5 out of 5 stars by our customers 561

Video instructions and help with filling out and completing Where 8850 Form Submission

Instructions and Help about Where 8850 Form Submission

Forms are fundamental into any web application right you need to be able to collect data and put it into your back-end in your database react is no different so let's go ahead and take a look at our actual input and just generally how we should handle forms using react now this is a super basic form right just one input one button that's it that's all we're gonna really be looking at and the question is how do you handle a form and how do you actually handle what this data is so the first thing is you probably might be familiar with this on submit idea right so when a form is submitted how do we prevent it from doing its default action on submit is how that's done in react just like that so on submit of course I'm going to have it being handled by one of my methods in this component and in this case it's gonna be handle submit and it's literally just this dot handle submit that will allow me to use the event so I can pass that in as a parameter here and we can prevent whatever the default action is of that form right so even if the method is you know post like a lot of forms end up being we can just completely ignore that that default we'll do that as you may have seen before so that's how we handle the preventing of the action going through but how do we actually get the data right so there's a few different ways on how we could go about getting the data but what I'm gonna do is the way that I find to be fairly easy and fairly straightforward for things going forward as well so the thing I'm going to do is initially set a constructor so we want to set a constructor with our props and I'll do this that's state and set it equal to my default values now in this case I have an input with a name of name so like you know we could do first name or full name you could do all sorts of things in here it that part doesn't really matter it's just making sure that you know that those are actually different so let's actually do that I'll just say full name okay so this that state full name is null so I mean making these two being the exact same and that's because of this handle input change here so since I'm using this state what I'm also gonna do is put in a constant for this full name and say this dot state okay so so we can actually render out whatever that ends up being right here I'm just gonna put a paragraph full name is just like that now the reason I'm showing you this part is to show you how this data binding works which is pretty pretty cool so I'm gonna leave it in as full name and now we've got this handle input change so what is the event that we have to handle for this input change well it's really simple it's on change all right so on change whenever this event happens we want to call this dot handle input change and of course that's gonna bring in an event as well and you could do event prevent default it probably doesn't actually matter because the input changing doesn't really have an event that it needs to prevent but I mean sometimes you just get in that habit of doing it so that's fine okay so now that I've got this what is this event well so if I console.log the event I can actually see what's going on but I already know what it is and it's console.log and we do event dot target dot name that will give us this this value whatever that value is and I can also do console.log event target dot value so this is allowing me to get the name of the input and the value now the reason you do it this way is so that I can have 15 different inputs or however many inputs I want as long as the names are different the value will always be correct right so we'll always get the right value and the target value it's not the same for every kind of form HTML tag so like inputs this works really really well text areas this works really really well so let's just keep it with those the input type of text input type of password those all work very well okay so now that I've got this handle input chain what I need to do is change my state based off of what's coming in to the input because I need this full name portion here and that's why we name the state aspect the same as the input because what I'm gonna do now is this that set state curly brackets and I need to set the full name to what the value is so event target dot value now of course I need this to be able to work not just on you know this one input this one text input but on all of them so we have to change this syntax to being brackets so square brackets event target that name this allows me to set the key for the key value pair in this this dictionary that's coming through here so that using those brackets does that that's that's the purpose of that so now that we've got this saved I can actually see what's going on so let's go into the actual item here and I'll say full name is just a Mitchell that's me and we see that the data is bound together right so I didn't I didn't set a value on here like you can you can say.

If you believe that this page should be taken down, please follow our DMCA take down process here.