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 from "react";
export class Info extends React.Component
{
constructor(props)
{
super(props);
this.fun = this.fun.bind(this); //event method binding
this.input = React.createRef(); //element binding
}
fun(event)
{
alert(this.input.current.value);
event.preventDefault();
}
render()
{
return(
<form onSubmit={this.fun}>
<input type="text" ref={this.input} id="txtnum" placeholder="Enter Name"/>
<br/>
<input type="submit" value="click" />
</form>
);
}
}
Addition Program Example using ref:-
import React from "react";
export class Info extends React.Component
{
constructor(props)
{
super(props);
this.fun = this.fun.bind(this); //event method binding
this.input = React.createRef(); //element binding
}
fun(event)
{
// var s = parseInt(document.getElementById("txtnum1").value)+parseInt(document.getElementById("txtnum2").value);
var s = parseInt(this._num1.value)+parseInt(this._num2.value);
alert(s);
event.preventDefault();
}
render()
{
return(
<form onSubmit={this.fun}>
<input type="text" ref={inputValue => this._num1 = inputValue} placeholder="Enter First Number"/>
<br/>
<input type="text" ref={inputValue => this._num2 = inputValue} placeholder="Enter Second Number"/>
<br/>
<input type="submit" value="click" />
</form>
);
}
}
Create a Component to perform the addition of two numbers?
import React from "react";
export class Info extends React.Component
{
constructor(props)
{
super(props);
this.fun = this.fun.bind(this); //event method binding
this.input = React.createRef(); //element binding
}
fun(event)
{
var s = parseInt(document.getElementById("txtnum1").value)+parseInt(document.getElementById("txtnum2").value);
alert(s);
event.preventDefault();
}
render()
{
return(
<form onSubmit={this.fun}>
<input type="text" id="txtnum1" placeholder="Enter First Number"/>
<br/>
<input type="text" id="txtnum2" placeholder="Enter Second Number"/>
<br/>
<input type="submit" value="click" />
</form>
);
}
}
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>
);
}
}
Functional Component Example using Uncontrolled Form Input:-
import React,{ useRef, useState } from "react";
function UnFunctionComponent()
{
const p = useRef(null);
const r = useRef(null);
const t = useRef(null);
const [si, setSi] = useState(0);
function sicalc(event)
{
var s = (p.current.value*r.current.value*t.current.value)/100;
setSi(s);
// alert(s);
event.preventDefault();
}
return(<div>
<h1>Simple Interest Program</h1>
<form onSubmit={sicalc}>
<input type="text" ref={p} placeholder="Enter value for P"/>
<br />
<input type="text" ref={r} placeholder="Enter value for R" />
<br />
<input type="text" ref={t} placeholder="Enter value for T" />
<br />
<input type="submit" name="btnsubmit" value="Click" />
<p>{si}</p>
</form>
</div>)
}
export default UnFunctionComponent;
POST Answer of Questions and ASK to Doubt