Introduction
Lets take a look at how forms are being handled in ReactJS. We will have a very basic form having following fields:
- First Name
- Last Name
- Full Name
On submit, we would just want to show the full name field. We will see:
- How to handle change events
- How to capture value of eaach field in state
- How to handle submit button event
- How to not re-render the form
Form Component - Basic Form Handling
import React, {Component} from 'react';
class Form extends Component {
state = {
firstName: "",
lastName: "",
fullName: ""
};
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value
});
}
handleSubmit = (event) => {
event.preventDefault();
this.setState({
fullName: `${this.state.firstName} ${this.state.lastName}`,
firstName: "",
lastName: ""
});
}
render() {
return (
<section>
<article>
<form onSubmit={this.handleSubmit}>
<input
type="text"
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
/>
<input
type="text"
name="lastName"
value={this.state.lastName}
onChange={this.handleChange}
/>
<button type="submit">submit</button>
</form>
</article>
<article>
<h1>Full Name</h1>
<div>{this.state.fullName}</div>
</article>
</section>
)
}
}
class App extends Component {
render() {
return <React.Fragment>
<Form />
</React.Fragment>
}
}
export default App;In above form code, lets discuss various concepts:
- We have two text fields for first and last name
- configured a change event handler. Whenever we type something on these text boxes, onChange event will trigger and we will save the value in state of component.
- You see the one liner code in handleChange:
[event.target.name]: event.target.valueThis is a shorthand code to set the required field. If its not there, we would be doing set of if-else. And, checking if name is firstName of lastName. Something like:
if (event.target.name === "firstName") {
const textValue = event.target.value;
this.setState({
firstName: textValue
});
}This is not at all required.
- Finally, handleSubmit is the method to handle submission of form.
- We have used:
event.preventDefault();This is to prevent the default behavior of submission. If its not there, entire component will re-rendered. This will cause the reset of our state.
- Next, we are just setting fullName field in the state and clearing firstName and lastName.
This is a very basic form handling, and the objective is to give an idea of how the forms are handled.
Form Handling - Getting value using Ref
Another way to get values of input fields is by using keyword ref. And, we can even set styles on the input items.
Lets take a look at the example:
import React, { Component } from "react";
class Form extends Component {
handleSubmit = e => {
e.preventDefault();
// accessing field from refs
const nameField = this.refs.nameField;
const nameFieldValue = nameField.value;
// accessing field by class's member variable
const email = this.email.value;
const infoText = this.refs.infoText;
const infoTextValue = infoText.textContent;
infoText.style.color = "red";
console.log(nameFieldValue, email, infoTextValue);
};
render() {
return (
<section>
<form onSubmit={this.handleSubmit}>
<input type="text" ref="nameField" />
<input type="email" ref={ev => (this.email = ev)} />
<button type="submit">submit</button>
</form>
<p ref="infoText">hello world</p>
</section>
);
}
}
class App extends Component {
render() {
return <Form />;
}
}
export default App;You can see an interesting concept of getting values by using refs. For this, you need to give a ref value in input field and you can access them in any function of this component.
Another new thing we see is:
<input type="email" ref={ev => (this.email = ev)} />Here, we are declaring a method in ref. And, we are setting the value into a variable email, which is class’s member variable. And, we can access class’s member variable anywhere in the class.
Another example of getting the p item and setting some color style on it.
const infoText = this.refs.infoText;
const infoTextValue = infoText.textContent;
infoText.style.color = "red";To get the innerContent of this p field. We can use:
const infoText = this.refs.infoText;
const infoTextValue = infoText.textContent;
// get the value in <p> field.
