Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • What are forms in Reactjs
  • Learn React

What are forms in Reactjs

Spoke Right December 12, 2022 2 min read

FOrms in REact JS

React Forms
For any modern web application, a form is a crucial part, mainly due to its features of serving numerous purposes like the authentication of the user, adding user, searching, filtering, booking, ordering, etc. In this way, the users interact with the application as well as gather information from the users. In React, a stateful, reactive approach is taken to build forms and this process is generally implemented by using controlled components. The form input to React can be of two types: Uncontrolled component and Controlled component.

Uncontrolled component:
Similar to the traditional HTML form inputs, the uncontrolled component can be written using a ref to get form values from the DOM. Thus there is no need to write an event handler for every state update and the HTML elements maintain their own state that will be updated when the input value changes.

Example:

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('Successful entry'.);  
event.preventDefault();  
}  
render() {  
return (  
<form onSubmit={this.updateSubmit}>  
<h1>Uncontrolled Form</h1>  
<label>Email:  
<input type="text" ref={this.input} />  
</label>  
<input type="submit" value="Submit" />  
</form>  
);  
}  
}  
export default App;

Controlled Component:
Unlike the uncontrolled component, the input form element in the controlled component is handled by the component rather than the DOM. It takes its current value through props. The changes are notified through callbacks.

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('Successful Submission: ' + this.state.value);  
event.preventDefault();  
}  
render() {  
return (  
<form onSubmit={this.handleSubmit}>  
<h1>Controlled Form</h1>  
<label>  
Email:  
<input type="text" value={this.state.value} onChange={this.handleChange} />  
</label>  
<input type="submit" value="Submit" />  
</form>  
);  
}  
}  
export default App;

Continue Reading

Previous: How to understand lifecycle methods in ReactJS
Next: What is Difference Between Controlled And Uncontrolled

Related Stories

Which is Difference Between AngularJS And ReactJS
1 min read
  • Learn React

Which is Difference Between AngularJS And ReactJS

December 16, 2022
What is higher-order component in Reactjs
2 min read
  • Learn React

What is higher-order component in Reactjs

December 16, 2022
How do I create a table in ReactJS
2 min read
  • Learn React

How do I create a table in ReactJS

December 16, 2022

This AD Will support Us

Support Us

Coding Ustad LTD Support
Coding Ustad LTD Support

Coding Ustad LTD

Coding Ustad LTD
Coding Ustad LTD

Recent Posts

  • Imran Khan, Former Prime Minister, Takes TikTok by Storm with Record-Breaking Followers and Likes
  • How to Install Node.js and npm on CentOS 7
  • How to Install Node.js and npm on CentOS 7
  • How to Install CentOS Web Panel (CWP) on CentOS 7
  • The Power of Marketing in Real Estate: A Guide to Boost Your Business

Get free Hosting

Hostens.com - A home for your website
Ahsan Nadeem

You may have missed

Imran Khan, Former Prime Minister, Takes TikTok by Storm with Record-Breaking Followers and Likes
2 min read
  • Spoke Right News

Imran Khan, Former Prime Minister, Takes TikTok by Storm with Record-Breaking Followers and Likes

July 18, 2023
How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 3, 2023
How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 2, 2023
How to Install CentOS Web Panel (CWP) on CentOS 7
3 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install CentOS Web Panel (CWP) on CentOS 7

May 2, 2023
  • Home
  • Our Services
  • Free Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
  • Contact Us
Copyright © All rights reserved. | MoreNews by AF themes.