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"

 Controlled Form-Input in React-JS:-

..............................................................................................................................................................

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

A controlled component takes its current value through props and notifies the changes through events or callbacks like an onChange event. A parent component "controls" these 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 a "dumb component."



Code of Controlled Component in React JS:-

Now i am implementing addition program to implement react-js controlled component.

import React, { Component } from 'react';  
export class Controlledcomponent extends React.Component
{
    constructor(props) {  
        super(props);  
        this.state = {value:'',value1:''}
        this.handleSubmit = this.handleSubmit.bind(this); 
        this.handleSubmit1 = this.handleSubmit1.bind(this);   
        this.updateSubmit = this.updateSubmit.bind(this);  
         
    } 
    handleSubmit(event)
    {
        this.setState({value:event.target.value});
    }
    handleSubmit1(event)
    {
        this.setState({value1:event.target.value});
    }
    updateSubmit(event) {  
       var c = parseInt(this.state.value)+parseInt(this.state.value1);
       alert("Result is "+c);
        event.preventDefault();  
    }   

    render() {  
        return (  
          <form onSubmit={this.updateSubmit}>  
            <h1>controlled Form Example</h1>  
            <label>Num1:  
                <input type="text" onChange={this.handleSubmit}  />  
            </label>  
            <label>Num2 :  
                <input type="text" onChange={this.handleSubmit1}   />  
            </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