Forms in React

In React, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. However, in controlled components, the React component that renders the form also controls its state. This approach provides more control over the form data.

Example of a Controlled Component:

import React, { useState } from 'react';

function ControlledForm() {
  const [inputValue, setInputValue] = useState('');

  function handleChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <div>
      <form>
        <label>
          Name:
          <input type="text" value={inputValue} onChange={handleChange} />
        </label>
      </form>
      <p>Current input value: {inputValue}</p>
    </div>
  );
}

export default ControlledForm;

In this example, the inputValue state is controlled by the ControlledForm component. The handleChange function updates the state whenever the input value changes, ensuring that the component’s state always reflects the current input value.

Handling form submissions in React involves managing the form’s submit event and processing the form data. You can prevent the default form submission behavior and handle the data within your React component.

Example of Handling Form Submissions:

import React, { useState } from 'react';

function FormSubmission() {
  const [inputValue, setInputValue] = useState('');

  function handleChange(event) {
    setInputValue(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert('Form submitted with value: ' + inputValue);
  }

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

export default FormSubmission;

In this example, the handleSubmit function prevents the default form submission behavior using event.preventDefault(). It then processes the form data (in this case, simply alerting the input value).

Refs provide a way to access and interact with DOM elements directly within your React components. This can be useful for tasks such as managing focus, selecting text, or integrating with third-party libraries that require direct DOM manipulation.

Example of Using Refs:

import React, { useRef } from 'react';

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

  function handleSubmit(event) {
    event.preventDefault();
    alert('Input value is: ' + inputRef.current.value);
  }

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

export default FormWithRef;

In this example, the inputRef is created using useRef and attached to the input element via the ref attribute. When the form is submitted, the handleSubmit function accesses the input value directly through inputRef.current.value.

Handling forms in React requires a good understanding of controlled components, form submissions, and refs. By using controlled components, you can manage the state of form elements efficiently. Handling form submissions allows you to process user input and prevent default behaviors, while refs provide a way to directly interact with DOM elements when necessary. These techniques are essential for building robust and user-friendly forms in React applications.

Next, we’ll explore the concept of lifting state up, which is crucial for managing state shared between multiple components.