Scribd
Upload
17 views5 pages

Refs

The document discusses refs, controlled forms, and uncontrolled forms in React. Refs are used to directly access DOM elements, while controlled forms store form data in component state and uncontrolled forms rely on DOM state management. Controlled forms are recommended as they allow sending form data to the backend and integrating with React state updates.

Uploaded by

gagangk8822
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views5 pages

Refs

The document discusses refs, controlled forms, and uncontrolled forms in React. Refs are used to directly access DOM elements, while controlled forms store form data in component state and uncontrolled forms rely on DOM state management. Controlled forms are recommended as they allow sending form data to the backend and integrating with React state updates.

Uploaded by

gagangk8822
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Refs:

 Refs are shorthand for reference.


 Refs are used to create the reference of a particular element.
 It is imperative way means we are directly communicating with DOM. So we should
not over use refs.
 Inside ref there is one property called as current.
Steps :
1)first create a ref using useRef( ) hook.
2) Inorder to access the particular element, pass one special attribute called as ref inside
particular element.
3) Inside the ref pass the created refs, ref={ }. So that we are able to access all the properties
of the targeted element.
App.jsx
Forms in React:
FORM

Uncontrolled FORM Controlled FORM

Cannot store data in State Object.


Store data in the state object
This is normal DOM way
We can send data to backend
Here we are sending data only once

React State,
React Refs
Value attribute,

Name attribute,

onChange event

Controlled Forms
 A controlled form in React is like a form where React controls all the input elements.
 This means that the values of the form elements are stored in the component's state
and are updated through React.
 When a user interacts with the form (like typing in an input field), React updates the
state, and the value of the input field reflects what's in the component's state.
import React, { useState } from 'react'

const App = () => {


let [state, setState] = useState({
name: "",
password: "",
gender:""
})

let [skills, setSkills] = useState([])

let { name, password,gender } = state;


let handleSubmit = (e) => {
e.preventDefault();
console.log(state);
console.log(skills);
}

let handleChange = (e) => {


console.log(e);
let { name, value } = e.target;
setState({...state,[name]:value})
}

let handleSkills = e => {


setSkills([...skills,e.target.value])
}
return (
<>
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
placeholder="enter your name"
value={name}
name="name"
onChange={handleChange}
/>
</div>
<div>
<input
type="password"
placeholder="enter your password"
value={password}
name="password"
onChange={handleChange}
/>
</div>
<div value={gender} name="gender" onChange={handleChange}>
<label htmlFor="">Gender:</label>
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
</div>
<div value={skills} name='skills' onChange={handleSkills}>
<label htmlFor="">Skills</label>
<input type="checkbox" name='skill' value='html'/>
Html
<input type="checkbox" name='skill' value='css'/>
CSS
<input type="checkbox" name='skill' value='js'/>
JS
</div>
<div>
<button>Submit</button>
</div>
</form>
</>
);
}

export default App

Uncontrolled Forms
 An uncontrolled form in React is like a form where React doesn't directly manage the
values of the input elements.
 Instead, the values of the form elements are managed by the DOM (the web page
itself).

App.jsx
import React, { useRef } from 'react'

const App = () => {


let inputRef = useRef()
let passwordRef = useRef()

let handleSubmit = (e) => {


console.log(e);
e.preventDefault();
let name = inputRef.current.value;
let pass = passwordRef.current.value;
console.log(name,pass);
}
return (
<>
<form onSubmit={handleSubmit}>
<div>
<input type="text" ref={inputRef}/>
</div>
<div>
<input type="password" ref={passwordRef}/>
</div>
<div>
<button>Submit</button>
</div>
</form>
</>
)
}

export default App

You might also like