Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 Uncontrolled form input in React-JS?


If we want to take input from users without any separate event handling then we can uncontrolled the data binding technique.

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 of Uncontrolled Form Input:-


import React, { Component } from 'react';  
export class Uncontrolled extends React.Component
{
    constructor(props) {  
        super(props);  
       
        this.updateSubmit = this.updateSubmit.bind(this);  
        this.input = React.createRef();  
    } 

    updateSubmit(event) {  
        alert(this.input.current.value);  
        event.preventDefault();  
    }  

    render() {  
        return (  
          <form onSubmit={this.updateSubmit}>  
            <h1>Uncontrolled Form Example</h1>  
            <label>Name:  
                <input type="text" ref={this.input} />  
            </label>  
            
            <input type="submit" value="Submit" />  
          </form>  
        );  
      }  

}


We can access React form element data using Javascript dom objects?

import React, { Component } from 'react';  
export class Uncontrolled extends React.Component
{
    constructor(props) {  
        super(props);  
       
        this.updateSubmit = this.updateSubmit.bind(this);  
        this.input = React.createRef();  
    } 

    updateSubmit(event) {  
        alert(document.getElementById("txt1").value + " ," +document.getElementById("txt2").value);
        
     //   alert(this.input.current.value);  
    // console.log("hello"+this.input.current.value);
        event.preventDefault();  
    }   

    render() {  
        return (  
          <form onSubmit={this.updateSubmit}>  
            <h1>Uncontrolled Form Example</h1>  
            <label>Name:  
                <input type="text" ref={this.input} name="txt1" id="txt1" />  
            </label>  
            <label>Email:  
                <input type="text" ref={this.input} name="txt2" id="txt2" />  
            </label>  
            
            <input type="submit" value="Submit" />  
          </form>  
        );  
      }  

}


    

Another example of Uncontrolled component for addition program?


import React, { Component } from 'react';  
export class Uncontrolled extends React.Component
{
    constructor(props) {  
        super(props);  
       
        this.updateSubmit = this.updateSubmit.bind(this);  
        this.input = React.createRef();  
    } 

    updateSubmit(event) {  
       var a = document.getElementById("txt1").value;
       var b = document.getElementById("txt2").value;
       var c = parseInt(a) + parseInt(b);
        alert(c);

     //   alert(this.input.current.value);  
    // console.log("hello"+this.input.current.value);
        event.preventDefault();  
    }   

    render() {  
        return (  
          <form onSubmit={this.updateSubmit}>  
            <h1>Uncontrolled Form Example</h1>  
            <label>Num1:  
                <input type="text" ref={this.input} name="txt1" id="txt1" />  
            </label>  
            <label>Num2 :  
                <input type="text" ref={this.input} name="txt2" id="txt2" />  
            </label>  
            
            <input type="submit" value="Submit" />  
          </form>  
        );  
      }  

}




Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post