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>  
        );  
      }  

}

Example of SI Component:-

import React from "react"
export class SimpleCalc extends React.Component
{
    constructor(props)
    {
       
        super(props);
        this.state = {p:'',r:'',t:''}
        this.enterP=this.enterP.bind(this);
        this.enterT=this.enterT.bind(this);
        this.enterR = this.enterR.bind(this);
        this.calc=this.calc.bind(this);

    }
    enterP(event)
    {
        this.setState({p:event.target.value});
       
       
    }
    enterR(event)
    {
        this.setState({r:event.target.value});
    }
    enterT(event)
    {
        this.setState({t:event.target.value});
    }

    calc(event)
    {
        var si = (parseFloat(this.state.p)* parseFloat(this.state.r)* parseFloat(this.state.t))/100;
        alert("Result is "+si);
    }
    render(){
        return(
         <form>
              <input type="text"  placeholder="Enter value of P" onChange={this.enterP} />
              <br/>
              <input type="text" placeholder="Enter value of R" onChange={this.enterR} />
              <br/>
              <input type="text"  placeholder="Enter value of T" onChange={this.enterT} />
              <br/>
              <input type="submit" value="click" onClick={this.calc} />

         </form>

        );

    }

}



Display Result under Textfield:-

import React from "react"
export class SimpleCalc extends React.Component
{
    constructor(props)
    {
       
        super(props);
        this.state = {p:'',r:'',t:'',si:''}
        this.enterP=this.enterP.bind(this);
        this.enterT=this.enterT.bind(this);
        this.enterR = this.enterR.bind(this);
        this.calc=this.calc.bind(this);

    }
    enterP(event)
    {
        this.setState({p:event.target.value});
       
       
    }
    enterR(event)
    {
        this.setState({r:event.target.value});
    }
    enterT(event)
    {
        this.setState({t:event.target.value});
    }

    calc(event)
    {
        var si = (parseFloat(this.state.p)* parseFloat(this.state.r)* parseFloat(this.state.t))/100;
        this.setState({si:si})
        //  alert("Result is "+si);
        event.preventDefault();
    }
    render(){
        return(
         <form>
              <input type="text"  placeholder="Enter value of P" onChange={this.enterP} />
              <br/>
              <input type="text" placeholder="Enter value of R" onChange={this.enterR} />
              <br/>
              <input type="text"  placeholder="Enter value of T" onChange={this.enterT} />
              <br/>
              <input type="submit" value="click" onClick={this.calc} />
              <br />
               <input type="text" value={this.state.si} />
         </form>

        );

    }

}                                                                                         


Calcuator Program in React Js:-

import React from "react";
export class ControllerformInput extends React.Component
{
 
    constructor(props)
    {
       
        super(props);
       
        this.state = {exp:'',c:''};
       
        this.updateSubmit = this.updateSubmit.bind(this);
        this.calc = this.calc.bind(this);
    }
   
   
     updateSubmit(event)
     {
     
        this.setState({exp:this.state.exp.concat(event.target.value)})
     
     
         event.preventDefault();
     }
     calc(event)
     {
        var s=this.state.exp;
        var t=0;
        for(var i=0;i<s.length;i++)
        {
         
         if(s[i]=='+')
         {
            if(i==1)
            {
            t = t+ parseInt(s[i-1]) + parseInt(s[i+1]);
            }
            else
            {
                t = t+parseInt(s[i+1]);
            }
           
         }
         else if(s[i]=='-')
         {
             if(i==1)
            {
            t = t+ parseInt(s[i-1]) - parseInt(s[i+1]);
            }
            else
            {
            t = t-parseInt(s[i+1]);
            }
           
         }
         else if(s[i]=='*')
         {
             if(i==1)
            {
            t = t+ parseInt(s[i-1]) * parseInt(s[i+1]);
            }
            else
            {
            t = t*parseInt(s[i+1]);
            }
           
         }
         else if(s[i]=='/')
         {
             if(i==1)
            {
            t = t+ parseInt(s[i-1]) / parseInt(s[i+1]);
            }
            else
            {
            t = t/parseInt(s[i+1]);
            }
         }

         
     }
     this.setState({'c':t});
     event.preventDefault();
    }
    render()
    {
     
        return(
            <div>
                <form >
                    <input type="text"  value={this.state.exp}  />
                    <br/>
                 
                    <br/>
                    <input type="submit" name="btnsubmit" value="1" onClick={this.updateSubmit}/>
                    <input type="submit" name="btnsubmit" value="2" onClick={this.updateSubmit}/>
                     <input type="submit" name="btnsubmit" value="+" onClick={this.updateSubmit}/>
                     <input type="submit" name="btnsubmit" value="-" onClick={this.updateSubmit}/>
                     <input type="submit" name="btnsubmit" value="=" onClick={this.calc}/>
                </form>
                <div>{this.state.c}</div>
            </div>
        );
    }
} 


Same Program using Eval :-

import React from "react";
export class ControllerformInput extends React.Component
{
 
    constructor(props)
    {
       
        super(props);
       
        this.state = {exp:'',c:''};
       
        this.updateSubmit = this.updateSubmit.bind(this);
        this.calc = this.calc.bind(this);
    }
   
   
     updateSubmit(event)
     {
     
        this.setState({exp:this.state.exp.concat(event.target.value)})
     
     
         event.preventDefault();
     }
     calc(event)
     {
        var s=this.state.exp;
     /*   var t=0;
        for(var i=0;i<s.length;i++)
        {
         
         if(s[i]=='+')
         {
            if(i==1)
            {
            t = t+ parseInt(s[i-1]) + parseInt(s[i+1]);
            }
            else
            {
                t = t+parseInt(s[i+1]);
            }
           
         }
         else if(s[i]=='-')
         {
             if(i==1)
            {
            t = t+ parseInt(s[i-1]) - parseInt(s[i+1]);
            }
            else
            {
            t = t-parseInt(s[i+1]);
            }
           
         }
         else if(s[i]=='*')
         {
             if(i==1)
            {
            t = t+ parseInt(s[i-1]) * parseInt(s[i+1]);
            }
            else
            {
            t = t*parseInt(s[i+1]);
            }
           
         }
         else if(s[i]=='/')
         {
             if(i==1)
            {
            t = t+ parseInt(s[i-1]) / parseInt(s[i+1]);
            }
            else
            {
            t = t/parseInt(s[i+1]);
            }
         }

         
     }*/
     this.setState({'c':eval(s)});
     event.preventDefault();
    }
    render()
    {
     
        return(
            <div>
                <form >
                    <input type="text"  value={this.state.exp}  />
                    <br/>
                 
                    <br/>
                    <input type="submit" name="btnsubmit" value="1" onClick={this.updateSubmit}/>
                    <input type="submit" name="btnsubmit" value="2" onClick={this.updateSubmit}/>
                     <input type="submit" name="btnsubmit" value="+" onClick={this.updateSubmit}/>
                     <input type="submit" name="btnsubmit" value="-" onClick={this.updateSubmit}/>
                     <input type="submit" name="btnsubmit" value="=" onClick={this.calc}/>
                </form>
                <div>{this.state.c}</div>
            </div>
        );
    }
}


Radiobuttonexample in React Js:-

import React from "react";
export class RadioExample extends React.Component
{
  
    constructor(props)
    {
       
        super(props);
        
        this.state = {a:'',b:'',c:'',o:''};
       
        this.updateSubmit = this.updateSubmit.bind(this);
        this.updateSubmit1 = this.updateSubmit1.bind(this);
        this.radioClick = this.radioClick.bind(this);
        this.calc = this.calc.bind(this);
    }
    
    
     updateSubmit(event)
     {
     
        this.setState({a:event.target.value})
        event.preventDefault();
     }
     updateSubmit1(event)
     {
     
        this.setState({b:event.target.value})
        event.preventDefault();
     }
     radioClick(event)
     {
     
        this.setState({o:event.target.value})
        //event.preventDefault();
     }
     calc(event)
     {
     if(this.state.o == "+")
     {
        this.setState({'c':parseInt(this.state.a)+parseInt(this.state.b)});
     }   
     else
     {
        this.setState({'c':parseInt(this.state.a)-parseInt(this.state.b)});
     }
     event.preventDefault();
    }
    render()
    {
      
        return(
            <div>
                <form>
                    <input type="radio" name="ope" value="+" onChange={this.radioClick}   />+
                    <input type="radio" name="ope" value="-" onChange={this.radioClick}  />-
                    <br></br>
                    <input type="text"  value={this.state.exp} placeholder="Enter First Number" onChange={this.updateSubmit}  />
                    <br/>
                    <input type="text"  value={this.state.exp} placeholder="Enter Second Number" onChange={this.updateSubmit1} />
                    <br/>
                    <input type="submit" name="btnsubmit" value="Calculate" onClick={this.calc}/>
                </form>
                <div>{this.state.c}</div>
            </div>
        );
    }
}

Function Component Example to create incremental:-

import { useState } from "react";

function ControlledFunctionComponentExample()
{

    const [a,setA] = useState(1);
   
    return(
     <div>
      <input type="button" onClick={() => setA(a+1)} value="click" /> 
     
      <p>{a}</p>
     </div>

    )
}

export default ControlledFunctionComponentExample;


Same program using the internal function:-

import { useState } from "react";

function ControlledFunctionComponentExample()
{

    const [a,setA] = useState(1);
    function fun()
    {
        setA(a+1);
    }
    return(
     <div>
      <input type="button" onClick={fun} value="click" /> 
     
      <p>{a}</p>
     </div>

    )
}

export default ControlledFunctionComponentExample;


function component with external function:-

import { useState } from "react";
function increment(n)
{
    return n+1;
}
function ControlledFunctionComponentExample()
{

    const [a,setA] = useState(1);
   
    return(
     <div>
      <input type="button" onClick={() => setA(increment)} value="click" /> 
     
      <p>{a}</p>
     </div>

    )
}

export default ControlledFunctionComponentExample;

Function Component Example in React Js for Swap Program:-

import { useState } from "react";

function Swap()
{

    var [a,setA] = useState(1);
    var [b,setB] = useState(1);
    function fun1(e)
    {
       
        setA(e.target.value);
    }
    function fun2(e)
    {
        setB(e.target.value);
       
    }
    function fun()
    {
     let temp = a;
     a=b;
     b=temp;
     setA(a);
     setB(b);

     
       
    }
   
    return(
     <div>
      <input type="text" onChange={(e) => fun1(e)}  />
      <br />
      <input type="text" onChange={(e) => fun2(e)}/>
      <br />
      <input type="button" onClick={fun} value="Swap" />
      <p>a={a},b={b}</p>
     </div>

    )
}

export default Swap;



Same Example using Class Component:-
import React, { useState } from "react";

export class Swap extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {a:'',b:''}
        this.handleInput = this.handleInput.bind(this);
        this.handleInput1 = this.handleInput.bind(this);
        this.handleClick = this.handleClick.bind(this);

    }
   
    handleInput(e)
    {
       
        this.setState({a:e.target.value});
    }
    handleInput1(e)
    {
        this.setState({b:e.target.value});
       
    }
    handleClick(e)
    {
     let temp = this.state.a;
     this.setState({'a':this.state.b});
     this.setState({'b':this.state.temp});
   

     
       
    }
   render()
   {
    return(
     <div>
      <input type="text" onChange={this.handleInput}  />
      <br />
      <input type="text" onChange={this.handleInput1}/>
      <br />
      <input type="button" onClick={this.handleClick} value="Swap" />
      <p>a={this.state.a},b={this.state.b}</p>
     </div>

    )
   }
}



Calculate Square Program using Controlled Functional Component:-

import { useState } from "react";

function Squarecom()
{
var [a,setA] = useState(0);
function setNumber(e)
{
   // alert(e.target.value);
     setA(e.target.value);

}
function calculate(e)
{
    setA(a*a);
   // alert(a);
    e.preventDefault();
}
return(
    <div>
            <form onSubmit={(e)=>calculate(e)}>
            <input type="text" onChange={(e)=>setNumber(e)}  />
            <br />
            <input type="submit" value="click" />
            </form>
        <p>{a}</p>
    </div>
); 



}

export default Squarecom;

Same Program using class Component:-

import React, { useState } from "react";

export class Squarecom extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state={'a':'','res':''};
        this.setNumber = this.setNumber.bind(this);
        this.calculate = this.calculate.bind(this);
    }

   setNumber(e)
{
   // alert(e.target.value);
     this.setState({'a':e.target.value});

}
 calculate(e)
{
    this.setState({'res':(parseInt(this.state.a)*parseInt(this.state.a))});

   // alert(a);
    e.preventDefault();
}
render()
{
    return(
    <div>
            <form onSubmit={this.calculate}>
            <input type="text" onChange={this.setNumber}  />
            <br />
            <input type="submit" value="click" />
            </form>
        <p>{this.state.res}</p>
    </div>
); 
}



}





  



Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post