Gestion des événements dans React

La gestion des événements dans React vous permet de répondre aux interactions des utilisateurs telles que les clics, les soumissions de formulaires et d'autres événements. Voici un aperçu de base et un exemple :

Concepts de base

1. Liaison d'événement : dans React, vous utilisez généralement camelCase pour les noms d'événements (par exemple, onClick, onChange).
2. Gestion des événements : Vous pouvez transmettre une fonction en tant que gestionnaire d'événements directement dans JSX.
3. Événements synthétiques : React enveloppe les événements natifs dans un événement synthétique pour garantir la compatibilité entre navigateurs.

Exemple

Voici un exemple simple de gestion d'un clic sur un bouton et d'une modification d'entrée :

import React, { useState } from 'react';

const EventHandlingExample = () => {
  const [inputValue, setInputValue] = useState('');

  const handleClick = () => {
    alert(`Button clicked! Input value: ${inputValue}`);
  };

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

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
        placeholder="Type something..." 
      />
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default EventHandlingExample;

Points clés

• Gestion de l'état : utilisez useState pour gérer l'état des composants fonctionnels.
• Objet événement : le gestionnaire d'événements reçoit un objet événement qui contient des informations sur l'événement.
• Prévenir les défauts : utilisez event.preventDefault() pour empêcher le comportement par défaut des événements (comme les soumissions de formulaires).

N'hésitez pas à demander si vous avez besoin d'exemples précis ou d'explications supplémentaires !

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!