Les formulaires en React

Les formulaires

Les formulaires et les inputs en React ne changent pas par rapport à ceux que vous connaissez en JavaScript, par contre les events à appeler sont : onChange pour les inputs, textearea et select, et onSubmit pour les formulaires.

{/* J'importe useState */}
import { useState } from 'react'

const Form = (props) => {
    {/* J'importe useState */}  
    const [username, setUsername] = useState("");

    {/* La fonction qui gère le onChange */}
    const handleChange = (event) => {
        console.log(event.target.value);
    };

    {/* La fonction qui gère le onSubmit */}
    const handleSubmit = (event) => {
        event.preventDefault();
        {/* Pour retrouver un input précis on utilise son name */}
        setUsername(event.target.username.value);
    };

    return (
        <>
            <p>
                { username }
            </p>
            <form onSubmit={handleSubmit}>
                {/* Attention le for des input devient htmlFor */}
                <label htmlFor="username">
                    Username:
                </label>
                {/* Mettez bien l'id et name de votre input */}
                <input
          	        name="username"
          	        id="username"
                    type="text"
                    onChange={handleChange}
                />
                <button type="submit">Valider</button>
            </form>
        </>
    );
};

export default Form;

30 January 2026