Form handling in React

1. Uncontrolled form

2. Controlled form

Uncontrolled Form:

• It is a form where it is created using reference concept

• In FBC we use useRef() to create uncontrolled form

• These forms are completely handled by DOM itself

• Suppose if we wanted to take we will be taking the data from DOM

Ex:

Uncontrolled.jsx:

import React, { useRef } from 'react';

const Uncontrolled = () => {
    let name = useRef();
    let email = useRef();

    let formHandle = (e) => {
        e.preventDefault();
        let nameData = name.current.value;
        let emailData = email.current.value;
        console.log(nameData);
        console.log(emailData);
    };

    return (
        <div>
            <form onSubmit={formHandle}>
                <label htmlFor="name">Name</label>
                <input type="text" id="name" name="name" ref={name} />
                <br />
                <label htmlFor="email">Email</label>
                <input type="email" id="email" name="email" ref={email} />
                <br />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

export default Uncontrolled;

Controlled Form:

• These form are created using state in react

• in FBC we use useState() to create controlled form.

• These form are completely handled by developers where we will be talking the data directly form the users by using onChange event.

Ex:

Controlled.jsx:

import React, { useState } from 'react'

const Controlled = () => {
    let [ name, setName ]=useState("");
    let [ email, setEmail ]=useState("");
    let nameData=(e)=>{
        setName(e.target.value);
    }
    let emailData=(e)=>{
        setEmail(e.target.value);
    }
    let formHandle=(e)=>{
        console.log(e);
        e.preventDefault();
        console.log(name,email);
    }
  return (
    <div>
        <h1>Controlled Form</h1>
        <label>Name</label>
        <input type="text" value={name} onChange={nameData} />
        <br />
        <label>Email</label>
        <input type="text" value={email} onChange={emailData}/>
        <br />
        <button onClick={formHandle}>Submit</button>
    </div>
  )
}

export default Controlled

Q. Create a controlled form for add, sub, multiply, divide

Task.jsx:

import React, { useState } from 'react'

const Task = () => {
    let[num1,setNum1]=useState(0)
    let[num2,setNum2]=useState(0)
    let getNum1=(e)=>{
        setNum1(e.target.value)
    }
    let getNum2=(e)=>{
        setNum2(e.target.value)
    }
    let add = (e)=>{
        e.preventDefault()
        console.log(Number(num1)+Number(num2));
    }
    let sub=(e)=>{
        e.preventDefault()
        console.log(num1-num2);
    }
    let multi=(e)=>{
        e.preventDefault()
        console.log(num1*num2);
    }
    let divide=(e)=>{
        e.preventDefault()
        console.log(num1/num2);
    }
    return (
    <div>
         <form action="">
            <label>Enter Name 1</label>
            <input type="text" value={num1} onChange={getNum1} />
            <br />
            <label>Enter Name 2</label>
            <input type="text" value={num2} onChange={getNum2} />
            <br />
            <button onClick={add}>+</button>
            <button onClick={sub}>-</button>
            <button onClick={multi}>*</button>
            <button onClick={divide}>/</button>
         </form>
    </div>
  )
}

export default Task