ReactJS - Basic Form Handling and Form submission

June 27, 2020

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.value

This 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.
reactjs

Similar Posts

Latest Posts