Handling User Input

In React forms, capturing and managing user input in form fields is a crucial task. This allows us to collect data from users and perform actions based on their input.

Controlled Components

React uses the concept of controlled components to handle user input. In a controlled component, the value of the input fields is controlled by React's state, which allows us to update and track the input data.

Let's take a look at an example:

1import React, { useState } from 'react';
2
3const UserForm = () => {
4  const [username, setUsername] = useState('');
5
6  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
7    setUsername(e.target.value);
8  };
9
10  return (
11    <div>
12      <h2>User Form</h2>
13      <form>
14        <label htmlFor='username'>Username:</label>
15        <input
16          type='text'
17          id='username'
18          value={username}
19          onChange={handleChange}
20        />
21      </form>
22    </div>
23  );
24};
25
26export default UserForm;

In the code above, we use the useState hook to create a state variable username with an initial value of an empty string. The handleChange function updates the username state whenever the user types into the input field.

By setting the value of the input field to the username state and handling the onChange event, we ensure that React controls the input value and updates it accordingly.

Form Submission

Once we have captured the user input, we might want to perform some action when the form is submitted. This can be done by handling the onSubmit event of the form.

1const handleSubmit = (e: React.FormEvent) => {
2  e.preventDefault();
3  // Perform form submission logic
4};

By calling e.preventDefault(), we prevent the default form submission behavior and handle the form submission ourselves. Inside the handleSubmit function, we can perform any necessary logic, such as validating the input, making API calls, or updating the UI.

Summary

Handling user input in React forms involves using controlled components to track and update the input values. By utilizing React's state management, we can easily capture and manage user input in form fields. Additionally, we can handle the form submission event to perform any necessary actions.

Now, let's apply this knowledge and create interactive forms in React!

xxxxxxxxxx

export default UserForm;

// Replace with your code that demonstrates handling user input in React forms

​

import React, { useState } from 'react';

​

const UserForm = () => {

  const [username, setUsername] = useState('');

​

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

    setUsername(e.target.value);

  };

​

  const handleSubmit = (e: React.FormEvent) => {

    e.preventDefault();

    console.log(`Username: ${username}`);

  };

​

  return (

    <div>

      <h2>User Form</h2>

      <form onSubmit={handleSubmit}>

        <label htmlFor='username'>Username:</label>

        <input

          type='text'

          id='username'

          value={username}

          onChange={handleChange}

        />

        <button type='submit'>Submit</button>

      </form>