React.js – Forms Basics

We would now take a look at how to handle forms in React. We would see how to capture input from form controls like textfields and select lists. Here are the topics we’ll cover:

1. About Controlled Components
2. A Simple Example
3. Example with Select Control
4. Handling Form Submission

1. About Controlled Components

In React, the form elements whose value are controlled by React are called controlled elements. The values of a form control are set using the state and modified using the setState() method. It follows a 3-step process:

• the value of the control is set to the state property
• anytime there is a change on the input’s value, an onChange() event is fired
• in the onChange() handler, the setState() method is used to update the state
• when the state get’s update, then the render method is called and the new state is assigned as a value to the input

Finally, this state property can always be used to submit the form when required.

2. A Simple Example

Create a form with a text input and a label. Set the value of the input control to the username state. set the onChange event to a function. I name the function, onChangeHandler.

When an handler is assigned to an onChange() event, the event is passed as a parameter to the onChange() event. Therefore, the value of the event can would be available to the onChangeHandler() via event.target.value.

The complete Form component is given below:

import React, { Component } from 'react'

class Form extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             username: ''
        }
    }

    onChangeHandler = (event) => {
        this.setState({
            username: event.target.value
        })
    }
    
    render() {
        return (
            <div>
               <label>Username:</label>
               <input 
               onChange={this.onChangeHandler} 
               value={this.state.username} 
               type='text'></input>
            </div>
        )
    }
}

export default Form

So whenever there is a change in the input value, the event is passed on to the event handler. The handler then uses the value of the event to update the state.

3. Example with Select Control

Now let’s add also a textarea and a select control to the component. Then we’ll wrap all the inputs using a single <form> </form> tags. The text area works the same way as the textfield. So I’m showing the select control below:

<div>
    <lable>Course</lable>
    <select value={this.state.course} 
    onChange = {this.handleCourseChange}>
        <option value="angular">Angular</option>
        <option value="javaScript">JavaScript</option>
        <option value="react">React</option>
    </select>
</div>

Similarly, the handleCourseChange() function sets the value of the select control. Let’s now see how to submit a form

4. Form Submission in React

To submit a form, simply follow these steps:

• The first thing we need to do is to add a submit button. Basically, this is a button, with type=”submit”.
• Next, we create a function that would handle the submission.
• Assign this function to the onSubmit event of the Form

Also, to prevent the page from refreshing, we add event.preventDefault to the function.

Finally, I want to mention that you can also use a normal button click event instead of a submit event. This would also work fine. However, form submit like we did makes it possible for user to submit the form by hitting the Enter key.