Javatpoint Logo

Home
React Native
ReactJS
TypeScript
JavaScript
Framework7
COA
HTML
CSS
Selenium
Servlet
JSP
jQuery
Quiz
Projects
Interview Q
Comment

ReactJS Tutorial
ReactJS TutorialReact IntroductionReact VersionReact Installationcreate-react-
appReact FeaturesPros & ConsReactJS vs AngularJSReactJS vs ReactNativeReact vs
VueReact JSXReact ComponentsReact StateReact PropsReact Props ValidationReact State
vs PropsReact ConstructorReact Component APIComponent Life CycleReact
FormsControlled vs UncontrolledReact EventsConditional RenderingReact ListsReact
KeysReact RefsReact FragmentsReact RouterReact CSSReact AnimationReact
BootstrapReact MapReact TableHigher-Order ComponentsReact Code SplittingReact
ContextReact HooksReact Flux ConceptReact Flux Vs MVCReact ReduxReact Redux
ExampleReact PortalsReact Error Boundaries
Misc.
Loop Array in React JSReact Axios Delete Request ExampleReact Multiple
CheckboxReact-iconsReact Date PickerReact HelmetInline Style in ReactjQuery vs.
ReactReactJS ArchitectureReactJS PropTypesBrowserRouter in ReactReact vs.
SvelteButton in ReactWhat is Dom in ReactUnit Testing in ReactCarousel in
ReactReact-PaginateWhat is the useState in ReactReact Time-PickerReact.js vs
Node.js10 Famous React AppsReact DropdownComposition vs. Inheritance Reactcomment
html in reactComponent vs. Purecomponent ReactCompare Angular React and VueComplete
React JS from Zero to Hero Get HiredConst in ReactJSConvert ejs to ReactReact
DevToolsReactJS JobsConditional Classes in ReactComponent ReactConstructor in
FunctionalConvert String to Component ReactReact in CssReact Devtools Extension
MCQ
React.js MCQ
Interview Questions
ReactJS InterviewJavaTpoint
ADVERTISEMENT
ADVERTISEMENT
next →← prev
React Forms
Forms are an integral part of any modern web application. It allows the users to
interact with the application as well as gather information from the users. Forms
can perform many tasks that depend on the nature of your business requirements and
logic such as authentication of the user, adding user, searching, filtering,
booking, ordering, etc. A form can contain text fields, buttons, checkbox, radio
button, etc.

Creating Form
React offers a stateful, reactive approach to build a form. The component rather
than the DOM usually handles the React form. In React, the form is usually
implemented by using controlled components.

There are mainly two types of form input in React.

Uncontrolled component
Controlled component
Uncontrolled component
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

In this example, the code accepts a field username and company name in an
uncontrolled component.

import React, { Component } from 'react';

class App extends React.Component {
constructor(props) {
super(props);
this.updateSubmit = this.updateSubmit.bind(this);
this.input = React.createRef();
}
updateSubmit(event) {
alert('You have entered the UserName and CompanyName successfully.');
event.preventDefault();
}
render() {
return (
<form onSubmit={this.updateSubmit}>
<h1>Uncontrolled Form Example</h1>
<label>Name:
<input type="text" ref={this.input} />
</label>
<label>
CompanyName:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default App;
Output

When you execute the above code, you will see the following screen.

React Forms
After filling the data in the field, you get the message that can be seen in the
below screen.

React Forms
Controlled Component
In HTML, form elements typically maintain their own state and update it according
to the user input. In the controlled component, the input form element is handled
by the component rather than the DOM. Here, the mutable state is kept in the state
property and will be updated only with setState() method.
ADVERTISEMENT
ADVERTISEMENT

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

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

Example

import React, { Component } from 'react';

class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('You have submitted the input successfully: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h1>Controlled Form Example</h1>
<label>
Name:
<input type="text" value={this.state.value}
onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default App;
Output

When you execute the above code, you will see the following screen.

React Forms
After filling the data in the field, you get the message that can be seen in the
below screen.

React Forms
Handling Multiple Inputs in Controlled Component
If you want to handle multiple controlled input elements, add a name attribute to
each element, and then the handler function decided what to do based on the value
of event.target.name.

Example
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
personGoing: true,
numberOfPersons: 5
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<h1>Multiple Input Controlled Form Example</h1>
<label>
Is Person going:
<input
name="personGoing"
type="checkbox"
checked={this.state.personGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of persons:
<input
name="numberOfPersons"
type="number"
value={this.state.numberOfPersons}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
export default App;
Output

React Forms
ADVERTISEMENT
Next TopicReact Controlled Vs Uncontrolled Component

← prevnext →

Youtube For Videos Join Our Youtube Channel: Join Now

Feedback
Send your Feedback to [email protected]
Help Others, Please Share
facebook twitter pinterest

Learn Latest Tutorials

Splunk tutorial
Splunk

SPSS tutorial
SPSS

Swagger tutorial
Swagger

T-SQL tutorial
Transact-SQL

Tumblr tutorial
Tumblr

React tutorial
ReactJS

Regex tutorial
Regex

Reinforcement learning tutorial

Reinforcement Learning

R Programming tutorial
R Programming

RxJS tutorial
RxJS

React Native tutorial

React Native

Python Design Patterns

Python Design Patterns

Python Pillow tutorial

Python Pillow

Python Turtle tutorial

Python Turtle

Keras tutorial
Keras

Preparation
Aptitude
Aptitude

Logical Reasoning
Reasoning

Verbal Ability
Verbal Ability

Interview Questions
Interview Questions

Company Interview Questions

Company Questions

Trending Technologies
Artificial Intelligence
Artificial Intelligence

AWS Tutorial
AWS

Selenium tutorial
Selenium

Cloud Computing
Cloud Computing

Hadoop tutorial
Hadoop

ReactJS Tutorial
ReactJS

Data Science Tutorial

Data Science

Angular 7 Tutorial
Angular 7

Blockchain Tutorial
Blockchain

Git Tutorial
Git

Machine Learning Tutorial

Machine Learning

DevOps Tutorial
DevOps

ADVERTISEMENT

B.Tech / MCA
DBMS tutorial
DBMS

Data Structures tutorial

Data Structures

DAA tutorial
DAA

Operating System
Operating System

Computer Network tutorial

Computer Network

Compiler Design tutorial

Compiler Design

Computer Organization and Architecture

Computer Organization

Discrete Mathematics Tutorial

Discrete Mathematics

Ethical Hacking
Ethical Hacking

Computer Graphics Tutorial

Computer Graphics

Software Engineering
Software Engineering

html tutorial
Web Technology

Cyber Security tutorial

Cyber Security

Automata Tutorial
Automata

C Language tutorial
C Programming

C++ tutorial
C++

Java tutorial
Java

.Net Framework tutorial

.Net

Python tutorial
Python

List of Programs
Programs

Control Systems tutorial

Control System

Data Mining Tutorial

Data Mining

Data Warehouse Tutorial

Data Warehouse
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Like/Subscribe us for latest updates or newsletter RSS Feed Subscribe to Get Email
Alerts Facebook Page Twitter Page YouTube Blog Page
Learn Tutorials
Learn Java
Learn Data Structures
Learn C Programming
Learn C++ Tutorial
Learn C# Tutorial
Learn PHP Tutorial
Learn HTML Tutorial
Learn JavaScript Tutorial
Learn jQuery Tutorial
Learn Spring Tutorial
Interview Questions
Java Interview Questions
SQL Interview Questions
Python Interview Questions
JavaScript Interview Questions
Angular Interview Questions
Selenium Interview Questions
Spring Boot Interview Questions
HR Interview Questions
C++ Interview Questions
Data Structure Interview Questions
About
This website is developed to help students on various technologies such as
Artificial Intelligence, Machine Learning, C, C++, Python, Java, PHP, HTML, CSS,
JavaScript, jQuery, ReactJS, Node.js, AngularJS, Bootstrap, XML, SQL, PL/SQL, MySQL
etc.

This website provides tutorials with examples, code snippets, and practical
insights, making it suitable for both beginners and experienced developers.

There are also many interview questions which will help students to get placed in
the companies.

Contact
Contact Us
Privacy Policy
Sitemap

About Me
ADVERTISEMENT
© Copyright 2011-2021 www.javatpoint.com. All rights reserved. Developed by Tpoint
Tech.