React Js Part Gestion des événements et gestion des formulaires

Bienvenue dans notre série React ! Dans notre dernier article, nous avons discuté des composants, de l'état et des accessoires, des concepts fondamentaux qui jettent les bases de la création d'applications React. Dans cet article, nous explorerons la gestion des événements et la gestion des formulaires dans React. Comprendre ces concepts vous permettra de rendre vos applications interactives et réactives aux entrées des utilisateurs.

Comprendre la gestion des événements dans React

La gestion des événements dans React est similaire à la gestion des événements en HTML et JavaScript, mais avec quelques différences clés. Dans React, les événements sont nommés à l'aide de camelCase et vous transmettez une fonction en tant que gestionnaire d'événements.

Gestion de base des événements :

Commençons par un exemple simple. Voici comment gérer un événement de clic sur un bouton :

import React from 'react';

function ClickButton() {
    const handleClick = () => {
        alert("Button clicked!!!");
    };

    return <button onClick={handleClick}>Click Me</button>;
}

export default ClickButton;

Dans cet exemple, lorsque l'on clique sur le bouton, la fonction handleClick est exécutée, affichant une alerte.

Gestion des événements avec des paramètres
Si vous devez transmettre des paramètres à votre gestionnaire d'événements, vous pouvez utiliser une fonction fléchée :

function GreetingButton({ name }) {
    const handleClick = (name) => {
        alert(`Hello, ${name}!`);
    };

    return <button onClick={() => handleClick(name)}>Greet</button>;
}

Ici, la fonction handleClick prend un paramètre de nom et affiche un message d'accueil personnalisé.

Prévenir les comportements par défaut
Dans les formulaires, vous souhaitez souvent empêcher l’action par défaut (comme le rechargement d’une page) lors de la soumission. Vous pouvez le faire en utilisant la méthode event.preventDefault() :

function Form() {
    const handleSubmit = (event) => {
        event.preventDefault();
        alert("Form submitted!");
    };

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

Gestion des formulaires dans React

Les formulaires sont une partie courante des applications Web, et la gestion des entrées de formulaire dans React nécessite une approche légèrement différente par rapport aux formulaires HTML traditionnels.

Exemple de composant contrôlé :

import React, { useState } from 'react';

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

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`Submitted: ${inputValue}`);
    };

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

export default ControlledForm;

Dans cet exemple, la valeur d'entrée est contrôlée par la variable d'état inputValue. La fonction handleChange met à jour l'état chaque fois que l'utilisateur tape dans le champ de saisie.

Formulaires multi-entrées
Vous pouvez facilement gérer plusieurs entrées en stockant leurs valeurs dans l'état du composant en tant qu'objet.

Exemple de formulaire à entrées multiples :

import React, { useState } from 'react';

function MultiInputForm() {
    const [formData, setFormData] = useState({ name: '', email: '' });

    const handleChange = (event) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`Name: ${formData.name}, Email: ${formData.email}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="name"
                placeholder="Name"
                value={formData.name}
                onChange={handleChange}
            />
            <input
                type="email"
                name="email"
                placeholder="Email"
                value={formData.email}
                onChange={handleChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default MultiInputForm;

Dans cet exemple, l'objet d'état formData contient les valeurs des entrées de nom et d'e-mail. La fonction handleChange met à jour le champ approprié en fonction de l'attribut name de l'entrée.

Dans cet article, nous avons exploré comment gérer les événements et gérer les formulaires dans React. Comprendre ces concepts est crucial pour créer des applications interactives qui répondent aux entrées des utilisateurs.

Dans notre prochain article, nous aborderons des sujets plus avancés. Restez à l'écoute !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!