React Forms

Page Content:
1.Forms – Introduction
2.Forms – Uncontrolled Component
3.Forms – Controlled Component

1.Introduction

1.Forms are an integral part of modern web applications.
2.Forms allow users to interact with the application & gather information from the user.
3.Forms can be used for user authentication, registering the user, searching & booking.
4.Forms can contain text fields,checkboxes,radio buttons & submit buttons.

Basically, there are 2 types of form input in react:
1.Uncontrolled component.
2.Controlled Component

---

1.Uncontrolled Component:

1.The uncontrolled component is similar to the traditional HTML form inputs, here DOM itself handles the form data.
2.The HTML elements maintain their own state that will be updated when the input value changes i.e they use a ref to get form values from the DOM.
3.There is no need to write an event handler for every state update.
4.You can use a ref to access the input field value of the form from the DOM.

Example:

uncontrolled component dont use any event handling function instead it updates the data directly through refs.

App.jsx

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 name successfully.');  
       event.preventDefault();  
   }  
   render() {  
     return (  
       <div>
           <h1>Uncontrolled Form Example</h1>
           <p>Name:<p>                         
           <input type="text" ref={this.input}/> 
           <button onClick={this.updateSubmit}>Submit</button>     
      </div>
     );  
   }  
 }  
 export default App;

---

2.Controlled component:

1.It’s convenient to have a JavaScript function that handles the submission of the form and has
access to the data that the user entered into the form.
The standard way to achieve this is with a technique called “controlled components”.
2.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.
3.Controlled components have functions that govern the data passing into them on every onChange event, rather than grabbing the data only once.
4.data is then saved to state and updated with setState() method. This makes component have better control over the form elements and data.

Example:

App.jsx

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 (  
          <div>
           <h1>Controlled Form Example</h1>
           <p>Name:<p>                         
           <input type="text" onChange={handleChange}/> 
           <button onClick={this.handleSubmit}>Submit</button>     
      </div>
       );  
   }  
 }  
 export default App;