Learn ReactJs from 0 – P9 – Form

Tram Ho

Hello today we continue to learn about ReactJs. And today we will talk about the form


For web applications, form is one of the indispensable components, and so is ReactJS. However, the Form in ReactJs has some differences compared to the HTML Form. With the HTML form, changing the values ​​of the properties will be managed locally and it will be difficult for us to handle the value before changing.

Example of an HTML Form

This is a typical example of an HTML Form, with the main function being to move to a new page when a user submits the form. With the above structure, you can freely in ReactJS and it will work normally.

But in most cases it is convenient to have a JavaScript function that handles form submission and gives us access to the values ​​of the form. One of the ways to do that is by using the “Controlled Components” technique.

Controlled Components

With HTML, elements like <input> <textarea> <select> are the elements that are often used to change the value of a form and these changes will be updated based on the user changing the input.

Let’s talk a little bit about React State. We have local state, which allows us to initialize and store the objects needed for the component, these values ​​are only updated via setState()

And we can combine the form and the React State to get the “Controlled component”. It can be understood as follows:

  • The React Component will render the form with the controls.
  • And when the user changes the value of the input, we can use setState() to update the component state as well

With this combination, we can easily handle the changing values, as well as when submitting the form.

For example, instead of going to a new page, we will log the changed values ​​when submitting the form, and we will use the “Controlled component”.

When the value is assigned to the control in the form, the display value is always the latest value of state this.state.value .

making the React state the source of truth

And when all the controls in the form use data from the state, what we want to do later, just take it from the state and use it, it will ensure the value in the state is the most standard value. After setting the value control from state to update state, we will define the function to update it, in the example above is the function handleChange , when the user takes any action to update the input, handleChange will be run and update state, If the state is updated, the UI will also be re-rendered.

The textarea Tag

In html, <textarea> is defined to handle text.

For React, the <textarea> tag uses attribute value instead of its child elements.

Notice that this.state.value is initialized in the constructor, so that the text area starts off with some text in it.

One recommendation is that when using the <textarea> tag, the initial value must be initialized.

The select Tag

In HTML, the <select> tag will create a drop down list.

For example:

As for React, it will syntax as follows:

You can pass an array to the value of the <select> tag, but remember to set the multiple attribute.

The difference between pure HTML and React when using the <select> tag is as follows:

  • HTML uses the selected attribute to determine the option selected , while React uses the value attribute

All 3 <input type="text"> , <textarea> , and <select> will accept the value attribute

The input file Tag

In HTML, the input tag of type="file" will allow the user to select a file from the storage device. But its value is read only so it will not be mentioned in today’s article

Handling Multiple Inputs

From the beginning of the article, we only work with 1 form with only 1 control but in reality, when working with the form, there will certainly be a lot of control. So how can we handle that?

When we need to handle multiple controls in a form, we need to remember the following:

  • Need to add name attribute for each control.
  • We can access the control via the value of event.target.name

Examples are as follows:

A small note when you use the version of ES (ECMAScript). With ES6 versions, it allows you to access the key in a simple way as follows

As for the ES5 versions, we need to do the following:

Controlled Input Null Value.

The simple understanding is that when we set the hard value for the input, the value of the input will not be changed by the user (the key is always not corrected).

If you want to allow users to change the value, set the value for it with Null

Share the news now

Source : Viblo