React Forms

Forms are an integral part of any modern web application. It allows the users to interact with the application as well as gather information from the users. Forms can perform many tasks that depend on the nature of your business requirements and logic such as authentication of the user, adding user, searching, filtering, booking, ordering, etc. A form can contain text fields, buttons, checkbox, radio button, etc.

Creating Form

React offers a stateful, reactive approach to build a form. The component rather than the DOM usually handles the React form. In React, the form is usually implemented by using controlled components.

There are mainly two types of form input in React.

Uncontrolled component
Controlled component

Uncontrolled component

The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here, the HTML elements maintain their own state that will be updated when the input value changes. To write an uncontrolled component, you need to use a ref to get form values from the DOM. In other words, there is no need to write an event handler for every state update. You can use a ref to access the input field value of the form from the DOM.

Example

In this example, the code accepts a field username and company name in an uncontrolled component.

  import React, { Component } from ‘react’;  class App extends React.Component {    constructor(props) {        super(props);        this.updateSubmit = this.updateSubmit.bind(this);        this.input = React.createRef();    }    updateSubmit(event) {        alert(‘You have entered the UserName and CompanyName successfully.’);        event.preventDefault();    }    render() {      return (        
<form onsubmit="{this.updateSubmit}">
<h1>Uncontrolled Form Example</h1>
<p>          <label>Name:              <input ref="{this.input}" type="text">          </label>          <label>              CompanyName:              <input ref="{this.input}" type="text">          </label>          <input type="submit" value="Submit">        </p></form>
<p>      );    }  }  export default App;  </p>

Output

When you execute the above code, you will see the following screen.

React Forms

After filling the data in the field, you get the message that can be seen in the below screen.

React Forms

Controlled Component

In HTML, form elements typically maintain their own state and update it according to the user input. In the controlled component, the input form element is handled by the component rather than the DOM. Here, the mutable state is kept in the state property and will be updated only with setState() method.

Controlled components have functions that govern the data passing into them on every onChange event, rather than grabbing the data only once, e.g., when you click a submit button. This data is then saved to state and updated with setState() method. This makes component have better control over the form elements and data.

A controlled component takes its current value through props and notifies the changes through callbacks like an onChange event. A parent component “controls” this changes by handling the callback and managing its own state and then passing the new values as props to the controlled component. It is also called as a “dumb component.”

Example

  import React, { Component } from ‘react’;  class App extends React.Component {    constructor(props) {        super(props);        this.state = {value: ”};        this.handleChange = this.handleChange.bind(this);        this.handleSubmit = this.handleSubmit.bind(this);    }    handleChange(event) {        this.setState({value: event.target.value});    }    handleSubmit(event) {        alert(‘You have submitted the input successfully: ‘ + this.state.value);        event.preventDefault();    }    render() {        return (            
<form onsubmit="{this.handleSubmit}">
<h1>Controlled Form Example</h1>
<p>              <label>                  Name:                  <input onchange="{this.handleChange}" type="text" value="{this.state.value}">              </label>              <input type="submit" value="Submit">           </p></form>
<p>        );    }  }  export default App;  </p>

Output

When you execute the above code, you will see the following screen.

React Forms

After filling the data in the field, you get the message that can be seen in the below screen.

React Forms

Handling Multiple Inputs in Controlled Component

If you want to handle multiple controlled input elements, add a name attribute to each element, and then the handler function decided what to do based on the value of event.target.name.

Example

  import React, { Component } from ‘react’;  class App extends React.Component {      constructor(props) {          super(props);          this.state = {              personGoing: true,              numberOfPersons: 5          };          this.handleInputChange = this.handleInputChange.bind(this);     }     handleInputChange(event) {         const target = event.target;         const value = target.type === ‘checkbox’ ? target.checked : target.value;         const name = target.name;         this.setState({             [name]: value         });    }    render() {        return (            
<form>
<h1>Multiple Input Controlled Form Example</h1>
<p>                <label>                    Is Person going:                    <input checked name="personGoing" onchange="{this.handleInputChange}" type="checkbox">               </label>               <br>               <label>                   Number of persons:                   <input name="numberOfPersons" onchange="{this.handleInputChange}" type="number" value="{this.state.numberOfPersons}">               </label>           </p></form>
<p>       );    }  }  export default App;  </p>

Output

React Forms

Next TopicReact Controlled Vs Uncontrolled Component

angularjs vs reactjs pros and cons of reactjs reactjs animations reactjs discussion reactjs features reactjs flux concept reactjs installation reactjs introduction reactjs quick guide reactjs router reactjs tutorial reactnative vs reactjs

React Forms

React Forms

Creating Form

Uncontrolled component

Controlled Component

Handling Multiple Inputs in Controlled Component

Example

T-Test in R

Verbal Reasoning | Blood Relations 1

You may also like