React Course Notes : Component Properties

20180920
Ideally I need to also be able to get information from the user if a button clicks or form filled.

That’s going to ask the user for their name via an input filed so the user can type their name in.

  • Make a new form inside of react component and add an on submit handler, so I can capture when the form is submitted

Below the paragraph, I’m going to create form tag and inside add two elements which is an input

and a button.

<form onSubmit={}>

<input type="text" ref="name"/>

<button>Set Name</button>

</form>

The input is going to have two attributes provided a type which is equal to “text” and then a custom attribute that it’s used by react called ref. *ref give me a name to an element that I want to access later. And in this case I want to access this input field so I can get the value from it and all I have to do is set it equal to something. In this case like “name”.

<input type="text" ref="name"/>

The last thing to do is create button using the button tag and for the text for this button. All I’m going to do is have “Set Name” print to the screen.

<button>Set Name</button>

Now I am almost done only submitting the form doesn’t actually do anything in order to do that.

I am going to use a built in attribute called onSubmit. It’s going to capture every time the form is submitted and I can set it equal to a javascript expression using opening and closing curly brackets.

<form onSubmit={}></form>

And this attribute onSubmit it expects a function to be passed to it and that function gets called

once the form has been submitted.

  • This new function I am going to create to call on button click and this is only going to get fired by our code.

I’m going to call “onButtonClick” and this is only going to get fired by our code and it’s an event handler. And since it’s a form I am going to kick things off by calling “e.preventDefault” and this is going to prevent the form from submitting and causing a page refresh.

I want to use single page application ideas and in this case one of them is to not have the browser completely refresh the app..

Now that I have function in place I still have to pass it in two on submit and I can do that by accessing it via this.onButtonClick.

<form onSubmit=(this.onButtonClick)>

  • The only thing left for this is to get the value they typed in and to use alert to show it in the browser

So what I’m going to do is use the ref I created to fetch the value. And in this case I am going to set a name equal to this.refs. Then the ref’s is an object and I have a name attribute on it. So this start refs.name and this is equal to the browser node. So this represents the element and to get the value of it I have to use .value.

var name = this.refs.name.value;

Now all I’m going to do is alert name to the screen to save the file, and I can go ahead and test out my application.

alert(name);

I’m going to run node server from the terminal to fire up my express server on port 3000 in the browser.

A quick recap

  • I created a form and it’s basic HTLM with two quirks. One is an on a submit attribute which is built in to react and it expects a function to get passed; Two I am using the react ref action to save a reference to input field. This lets me access it later anywhere in my code.
  • In this case I access the element and I access it’s a value property so I can get whatever is displayed.
  • I also created onButtonClick callback calling prevent default which prevents a full browser reload. When a form gets submitted for now it doesn’t update what’s viewed in the browser. So Hello Badu still prints even though I typed Annie.