Previous

React Forms

  • React forms allow users to interact with and submit data to the application.
  • React provides a controlled component approach for managing form input state.

Creating a Simple Form

Basic example of an input form with state.

import React, { useState } from 'react';

const SimpleForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <form>
      <label>
        Enter text:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <p>You entered: {inputValue}</p>
    </form>
  );
};

Handling Form Submission

Managing form submission and preventing the default behavior.

import React, { useState } from 'react';

const SubmissionForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Form submitted with value: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Enter text:
        <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

Handling Different Input Types

Using different input types like checkboxes and radio buttons.

import React, { useState } from 'react';

const InputTypesForm = () => {
  const [isChecked, setIsChecked] = useState(false);
  const [selectedOption, setSelectedOption] = useState('option1');

  return (
    <form>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={() => setIsChecked(!isChecked)}
        />
        Checkbox
      </label>
      <br />
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={() => setSelectedOption('option1')}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={() => setSelectedOption('option2')}
        />
        Option 2
      </label>
    </form>
  );
};

Using Controlled Components

Demonstrating how React controls the form inputs.

import React, { useState } from 'react';

const ControlledComponentsForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Username: ${username}, Password: ${password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      <br />
      <button type="submit">Login</button>
    </form>
  );
};

 

Summary

Working with forms in React involves managing state, handling user input, and responding to form submissions. Whether it's a simple text input or complex form elements, React's controlled component approach provides a consistent and efficient way to build interactive forms.

Previous