Uncontrolled Components | Forms

Using uncontrolled components for forms

Uncontrolled components in React are form elements where the form data is handled by the DOM itself rather than by the React component. This approach allows the form elements to maintain their own state, and you can access their values using refs. This tutorial covers how to use uncontrolled components for forms in React.

Key Points:

Uncontrolled components are form elements where the data is handled by the DOM itself.
You can access the values of uncontrolled components using refs.
Uncontrolled components are useful when you want the form elements to maintain their own state.

Creating an Uncontrolled Input

To create an uncontrolled input, you can use a ref to access the input's value directly from the DOM.

// Creating an uncontrolled input
import React, { useRef } from 'react';

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('Input value: ' + inputRef.current.value);
    };

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

export default UncontrolledInput;

Handling Multiple Inputs

To handle multiple inputs in an uncontrolled form, you can use multiple refs to access the values of each input.

// Handling multiple inputs
import React, { useRef } from 'react';

function UncontrolledForm() {
    const usernameRef = useRef(null);
    const emailRef = useRef(null);

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('Username: ' + usernameRef.current.value + ', Email: ' + emailRef.current.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>
                    Username:
                    <input type="text" ref={usernameRef} />
                </label>
            </div>
            <div>
                <label>
                    Email:
                    <input type="email" ref={emailRef} />
                </label>
            </div>
            <button type="submit">Submit</button>
        </form>
    );
}

export default UncontrolledForm;

Handling File Inputs

Uncontrolled components are particularly useful for file inputs, where you can access the file data directly from the input element.

// Handling file inputs
import React, { useRef } from 'react';

function FileInput() {
    const fileInputRef = useRef(null);

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('Selected file: ' + fileInputRef.current.files[0].name);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="file" ref={fileInputRef} />
            <button type="submit">Submit</button>
        </form>
    );
}

export default FileInput;

Full Example

Here is a complete example of a form managed with uncontrolled components in a React application:

// App.js
import React, { useRef } from 'react';

function App() {
    const usernameRef = useRef(null);
    const emailRef = useRef(null);
    const fileInputRef = useRef(null);

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('Username: ' + usernameRef.current.value + ', Email: ' + emailRef.current.value + ', Selected file: ' + fileInputRef.current.files[0].name);
    };

    return (
        <div className="container">
            <h1>Uncontrolled Components in React</h1>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>
                        Username:
                        <input type="text" ref={usernameRef} />
                    </label>
                </div>
                <div>
                    <label>
                        Email:
                        <input type="email" ref={emailRef} />
                    </label>
                </div>
                <div>
                    <label>
                        File:
                        <input type="file" ref={fileInputRef} />
                    </label>
                </div>
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

export default App;

Summary

In this tutorial, you learned how to use uncontrolled components for forms in React. Uncontrolled components are form elements where the form data is handled by the DOM itself rather than by the React component. You learned how to create uncontrolled inputs, handle multiple inputs, and manage file inputs. Understanding uncontrolled components is useful for scenarios where you want the form elements to maintain their own state.