Manipulation des événements et interactions utilisateur

Dans React, la manipulation des événements et les interactions utilisateur sont des aspects essentiels du développement d'applications interactives. Dans cette section, nous explorerons la manière de gérer les événements utilisateur dans les composants React et de capturer les entrées utilisateur à l'aide de formulaires et de champs de saisie.

Gestion des événements utilisateur

La gestion des événements utilisateur dans les composants React est similaire à la gestion des événements dans le DOM. Vous pouvez attacher des gestionnaires d'événements à des éléments JSX en utilisant la notation camelCase et en fournissant une fonction de rappel pour gérer l'événement.

Voici un exemple de gestion d'un clic sur un bouton :

import React, { useState } from 'react'
 
function Button() {
    const handleClick = () => {
        console.log('Le bouton a été cliqué')
    }
 
    return <button onClick={handleClick}>Cliquez ici</button>
}

Dans cet exemple, nous avons un composant Button avec une fonction handleClick qui est appelée lorsque le bouton est cliqué. Lorsque le bouton est rendu, nous utilisons onClick pour attacher la fonction de rappel handleClick à l'événement click.

De la même manière, vous pouvez attacher des gestionnaires d'événements pour d'autres événements couramment utilisés tels que onChange, onMouseOver, onKeyDown, etc.

Capture d'entrées utilisateur avec les formulaires

La capture des entrées utilisateur est souvent nécessaire pour obtenir des informations ou pour effectuer des actions basées sur les choix de l'utilisateur. Dans React, cela est généralement réalisé en utilisant des formulaires et des champs de saisie.

Voici un exemple de création d'un formulaire pour gérer une liste de tâches (to-do list) avec un champ de saisie et un bouton d'ajout :

import React, { useState } from 'react'
 
function TodoList() {
    const [tasks, setTasks] = useState([])
    const [inputValue, setInputValue] = useState('')
 
    const handleInputChange = (event) => {
        setInputValue(event.target.value)
    }
 
    const handleSubmit = (event) => {
        event.preventDefault()
        if (inputValue.trim() !== '') {
            const newTask = {
                id: Date.now(),
                text: inputValue,
            }
            setTasks([...tasks, newTask])
            setInputValue('')
        }
    }
 
    const handleDelete = (taskId) => {
        setTasks(tasks.filter((task) => task.id !== taskId))
    }
 
    return (
        <div>
            <h2>To-Do List</h2>
            <form onSubmit={handleSubmit}>
                <input
                    type='text'
                    value={inputValue}
                    onChange={handleInputChange}
                    placeholder='Nouvelle tâche...'
                />
                <button type='submit'>Ajouter</button>
            </form>
            <ul>
                {tasks.map((task) => (
                    <li key={task.id}>
                        {task.text}
                        <button onClick={() => handleDelete(task.id)}>Supprimer</button>
                    </li>
                ))}
            </ul>
        </div>
    )
}

Dans cet exemple, nous avons un composant TodoList qui gère une liste de tâches. La liste des tâches est stockée dans le state avec useState, et le champ de saisie utilise également le state pour gérer sa valeur. Lorsque le formulaire est soumis, une nouvelle tâche est créée avec un identifiant unique et le texte saisi. La liste des tâches est mise à jour en ajoutant la nouvelle tâche. Lorsque le bouton de suppression est cliqué, la tâche correspondante est supprimée de la liste.

Conclusion

La manipulation des événements et les interactions utilisateur sont des aspects clés du développement d'applications interactives en React. En utilisant la syntaxe JSX pour attacher des gestionnaires d'événements et en capturant les entrées utilisateur à l'aide de formulaires et de champs de saisie, vous pouvez créer des interfaces réactives et offrir une expérience utilisateur fluide.

Dans notre exemple, nous avons utilisé ces concepts pour créer une to-do list avec la possibilité d'ajouter et de supprimer des tâches. N'hésitez pas à explorer davantage les possibilités offertes par la manipulation des événements et les interactions utilisateur dans React pour créer des fonctionnalités avancées et interactives dans vos applications.