React Forms

React forms are an integral part of any modern react web apps. It allows the users to interact with the web application as well as gather information from the users. react 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 react form can contain text fields, buttons, checkboxes, radio buttons, etc.

Creating Form:

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

There are mainly two types of react form input in React.

⦁ Uncontrolled component
⦁ Controlled component

Uncontrolled component:

The uncontrolled form input is similar to the traditional HTML(Hypertext Markup Language) form inputs. The DOM(Document Object Model) itself handles the form data. Here, the HTML(Hypertext Markup Language) elements maintain their own react state that will be updated when the form input value changes. To write an uncontrolled react UI component, you need to use a ref to get react form values from the DOM(Document Object Model).\There is no need to write an event handler for every react state update. You can use a react ref to access the form input field value of the form from the DOM(Document Object Model).

Example:

accepts a form 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> 
      <label>Name: 
        <input type="text" ref={this.input} /> 
      </label> 
      <label> 
        CompanyName: 
        <input type="text" ref={this.input} /> 
      </label> 
      <input type="submit" value="Submit" /> 
     </form> 
   ); 
  } 
 } 
export default App;

OUTPUT:

Controlled components:

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

Controlled react 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 react state and updated with the setState() method. This makes react components have better control over the form elements and data.

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> 
     <label> 
       Name: 
       <input type="text" value={this.state.value} onChange={this.handleChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
   </form> 
  ); 
 } 
} 
export default App;

OUPUT: