What are Forms and Input Handling in React JS?

Forms and input handling are essential aspects of React applications, allowing you to capture and manage user input. React provides a controlled way to handle form elements, ensuring that the state of the form is synchronized with the state of the component.

Controlled Components

In a controlled component, form data is handled by the React component. The component's state becomes the single source of truth for the input's value. This means that the form element's value is set by the state, and any changes to the input are handled by updating the state.

Example: Controlled Input

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + name);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

export default NameForm;

In this example:

• The value attribute of the input is set to the name state variable.
• The onChange event handler updates the state with the input's current value.
• The handleSubmit function handles the form submission and prevents the default form behavior.

Handling Multiple Inputs

For forms with multiple input fields, you can use a single handler to manage all the inputs by using the name attribute of each input.

Example: Handling Multiple Inputs

import React, { useState } from 'react';

function MultiInputForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (event) => {
    alert(`Submitted: ${formData.firstName} ${formData.lastName}, Email: ${formData.email}`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        First Name:
        <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} />
      </label>
      <br />
      <label>
        Last Name:
        <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <br />
      <input type="submit" value="Submit" />
    </form>
  );
}

export default MultiInputForm;

In this example:

• The formData state object holds the values for all input fields.
• The handleChange function updates the state for the specific input field that triggered the change event.
• The name attribute on each input is used to identify which field should be updated.

Uncontrolled Components

Uncontrolled components manage their own state internally, and the form data is accessed using refs. This approach is less common in React due to the lack of direct control over form values.

Example: Uncontrolled Input

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + inputRef.current.value);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

export default UncontrolledForm;

In this example:

• The ref attribute is used to access the input's current value.
• The handleSubmit function retrieves the value from the input reference and handles the form submission.

Handling Form Validation

Form validation ensures that user inputs meet certain criteria before being submitted. Validation can be implemented using custom logic in the event handlers.

Example: Form Validation

import React, { useState } from 'react';

function ValidatedForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleChange = (event) => {
    setEmail(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!email.includes('@')) {
      setError('Invalid email address');
    } else {
      setError('');
      alert('Email submitted: ' + email);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input type="email" value={email} onChange={handleChange} />
      </label>
      <br />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <input type="submit" value="Submit" />
    </form>
  );
}

export default ValidatedForm;

In this example:

• The handleSubmit function includes logic to validate the email format.
• If the validation fails, an error message is displayed, and the form submission is prevented.

Conclusion

Handling forms and inputs in React involves managing component state to keep form elements synchronized with the state. Controlled components are the preferred method, providing a clear and manageable way to handle user input. Understanding how to handle multiple inputs, implement form validation, and work with uncontrolled components gives you the flexibility to build complex and user-friendly forms in React applications.

Further, if you have any questions, please visit our website, Gurulabs Website Design Agency.