Analyse et meilleures pratiques sur la création de problèmes de défaillance de liaison des événements d'élément dynamique dans React et natif JavaScript

Lors de l'insertion dynamique des chaînes HTML dans React ou JavaScript native, la liaison traditionnelle de l'événement ONCLICK peut échouer, résultant en une perception de référence. Cet article analysera ce problème en profondeur et fournira la bonne solution pour tirer parti des JSX et des événements synthétiques dans React et utiliser AddeveventListener dans JS natif pour assurer la fonction normale des fonctions d'événements des éléments dynamiques.

Analyse des problèmes: pourquoi la dynamique ONClick échoue-t-elle?

Dans le développement Web, nous devons parfois créer et insérer dynamiquement des éléments HTML et leur lier des événements. Cependant, lorsque vous essayez d'épisser HTML via une chaîne et l'insérez-le dans le DOM en utilisant INSERTADJACENTHTML, si la chaîne contient une liaison d'événements comme onclick = {myfunction} ou onclick = "myFunction ()", vous rencontrez souvent une erreur avec une référence non appariée: MyFunction n'est pas définie.

La raison principale est:

1. Scope JavaScript et analyse HTML: lorsque vous utilisez INSERTADJACENTHTML pour insérer une chaîne HTML contenant onClick = {myFunction}, le navigateur l'analysera comme HTML normal. À l'heure actuelle, {myFunction} n'est pas une expression JavaScript, mais un littéral de chaîne, et le navigateur ne peut pas l'associer à la fonction MyFunction dans la portée JavaScript actuelle. Même si onclick = "myFunction ()", le navigateur essaiera de trouver MyFunction sous la portée globale (fenêtre) lors de l'exécution. Si la fonction est définie dans une portée ou un module local, la recherche échouera également.
2. Les événements Virtual DOM et synthétiques virtuels de React: React fonctionne dans la couche DOM virtuelle, et il a son propre ensemble de mécanismes de traitement d'événements efficaces - Système d'événements synthétiques. Dans le composant React, nous écrivons des gestionnaires d'événements tels que onClick via JSX. React les convertira en auditeurs d'événements internes au moment de la compilation et utilisera le mécanisme de délégation des événements pour la gestion. Lorsque vous injectez la chaîne HTML d'origine directement via Window.Document.body.insertAdjacenthtml, vous contournez le système Virtual DOM et l'événement de React et insérez un élément DOM réel qui ne peut pas percevoir et lui lie un événement synthétique. Par conséquent, le style JSX onClick = {SomeFunction} n'est pas valide dans la chaîne HTML d'origine.

Méthode de liaison des événements corrects dans ReactJS

Dans les applications React, nous devons toujours suivre le paradigme de développement de React et utiliser le JSX et la composante pour gérer le contenu et les événements dynamiques. Évitez la manipulation directe de DOM ou injectant les chaînes HTML brutes.

Concept de base:

• En utilisant JSX: dans React, la création dynamique des éléments doit être effectuée via la syntaxe JSX, plutôt que d'épisser les chaînes HTML.
• Componentiisation: encapsuler les pièces d'interface utilisateur réutilisables en composants.
• Événements de synthèse: le système d'événements de React gérera la liaison et la gestion des événements.

Exemple de code: Rendez-vous dynamiquement et liez les événements

Supposons que nous ayons une fonction SupportQuestion qui doit être exécutée lorsque le bouton généré dynamiquement est cliqué.

 importer réagir à partir de «réagir»;

Exporter la fonction par défaut App () {
  // simule certains éléments qui nécessitent des éléments const dynamiques de const = [«Problème a», «Problème B», «Problème C»];

  // Définissez la fonction de gestionnaire d'événements, qui existera dans le cadre du composant const RoveSoESTtion = (itemToreMove) => {{
    console.log (`Suppression: $ {itemToreMove}`);
    // Dans l'application réelle, l'état sera mis à jour ici pour supprimer l'élément correspondant};

  Retour (
    <div classname="'contener'">
      <h1> Exemple d'événement de bouton de mouvement (réact) </h1>
      {items.map ((item, index) => (
        // Créer dynamiquement des éléments à l'aide de jsx <div key="{item}"> {/ * Les attributs de clés sont cruciaux pour le rendu de la liste * /}
          <span> {item} </span>
          {/ * Utilisez directement la fonction du gestionnaire d'événements comme valeur de la propriété onClick * /}
          <a href="#!" il est recommand de fournir un valide pour une balise ou bouton d onclick="{()"> supprimer
          >
            x
          </a>
        </div>
      ))}
    </div>
  ));
}

Points clés et précautions:

• Syntaxe JSX: la balise est déclarée directement dans JSX, et sa propriété onClick accepte une référence de fonction JavaScript.
• Référence de la fonction: onClick = {() => supprimer Si la suppression ne nécessite pas de paramètres, vous pouvez écrire directement onClick = {supprimer}.
• Attribut clé: lors du rendu d'une liste, il est crucial de fournir un attribut de clé unique pour chaque élément généré dynamiquement, ce qui aide à réagir à mettre à jour le dom.
• Évitez les opérations de DOM native: à l'intérieur des composants React, vous devez éviter d'utiliser des opérations DOM natives telles que Document.CreateElement, InsertAdjacentHTML, etc. pour créer et insérer des éléments. Cela détruira le mécanisme virtuel de gestion de DOM de React et entraînera des comportements et des problèmes de performance imprévisibles.

Stratégie de liaison des événements dans JavaScript natif

Si votre projet n'utilise pas React ou doit gérer les événements d'éléments dynamiques dans un environnement JavaScript purement indigène, l'utilisation d'AddeveventListener est la meilleure pratique.

Comprendre les limites de la propriété OnClick:

Lorsque nous injectons la chaîne HTML dans le DOM, par exemple:

 const RemoveBtn1 = '<a onclick="{removeQuestion"> x1 </a>'; // Erreur: le {} ici n'est pas une expression JS et sera traité comme un const littéral de chaîne ROUVERBTN2 = '<a onclick="re Support ()"> x2 </a>'; // possible, mais dépend de la portée globale et n'est pas suffisamment flexible

• onClick = {removeQuestion ()} n'est pas valide dans les chaînes HTML et le navigateur ne l'analysera pas dans une expression JavaScript.
• onclick = "re Support ()" essaie d'exécuter la suppression de SupporTetestion () lorsque vous cliquez sur. Cependant, cela nécessite que la fonction de supprimer doit être accessible dans la portée globale et n'est pas facile à transmettre des paramètres dynamiques ou à supprimer les événements.

Solution recommandée: utilisez AddEventListener

AddeventListener est la méthode de liaison des événements recommandée dans JavaScript natif, qui fournit des fonctions plus puissantes et une meilleure séparation.

Avantages:

• Structure et comportement séparés: HTML est responsable de la structure, JavaScript est responsable du comportement et le code est plus clair.
• Prend en charge plusieurs processeurs d'événements: le même élément et le même type d'événement peuvent lier plusieurs processeurs.
• Plus flexible: il peut facilement ajouter et supprimer les événements et soutenir la délégation des événements.

Exemple de code: Injectez dynamiquement HTML et liez les événements avec AddeveventListener

 // Définir la fonction de gestion des événements const RoveauStion = (btnText) => {
  console.log (`natif js: $ {btntext}` est supprimé);
  // Dans les applications réelles, les opérations DOM ou les mises à jour de données peuvent être effectuées ici};

const addQuetionsNative = () => {
  const contatener = document.getElementById ('natif-js-contrainer');
  if (! conteneur) {
    Console.Error («conteneur JS natif introuvable»);
    retour;
  }

  // 1. Créer et injecter dynamiquement la chaîne HTML const RoveBtnhtml = `
    <a class="retire-btn" data-item="x1"> x1 </a>
    <a class="retire-btn" data-item="x2"> x2 </a>
    <a class="retire-btn" data-item="x3"> x3 </a>
  `;
  contener.InsertAdjacentHtml («avant laense», removeBtnhtml);

  // 2. Une fois les éléments ajoutés au DOM, obtenez ces éléments et liez les événements // Utilisez SetTimeout pour vous assurer que la mise à jour DOM est terminée, mais dans les applications réelles, il est généralement exécuté immédiatement après l'insertion setTimeout (() => {{
    document.QuerySelectorall ('. Remove-Btn'). Foreach (btn => {
      // Évitez les liaisons répétées, vous pouvez supprimer l'ancien écouteur d'abord // btn.reMoveEventListener ('click', handlebtnclick); // Si vous avez besoin de const handlebtnclick = () => {
        const item = btn.dataset.item; // Obtenez des données dynamiques à partir de l'attribut de données supprimer la question (élément);
      };
      btn.addeventListener ('click', handlebtnclick);
    });
  }, 0); // 0ms délai assure les mises à jour DOM, qui n'est généralement pas requise dans la pratique};

// Une fois le chargement de page terminé, appelez document.addeventListener ('DomContentOaded', () => {
  // Créer un conteneur pour l'exemple JS natif const nativeContainer = document.CreateElement ('div');
  nativeContainer.id = 'natif-js-container';
  nativeContainer.innerhtml = '<h2> Exemple d'événement de bouton dynamique (natif js) </h2>';
  Document.Body.ApendChild (nativeContainer);
  AddQuestionsNative ();
});

Notes:

• Temps de liaison: assurez-vous qu'après les éléments a été ajouté au DOM, utilisez Document.QuerySelector et d'autres méthodes pour obtenir ces éléments et lier des événements.
• Délégation d'événements: Pour un grand nombre d'éléments générés dynamiquement, ou lorsque des éléments peuvent être ajoutés / supprimés à l'avenir, une approche plus efficace consiste à utiliser la délégation d'événements. Bonnez-vous les auditeurs d'événements à leur élément parent commun, puis déterminez quel élément enfant a déclenché l'événement en bouillonnant l'événement.

   // Exemple: Document de délégué d'événement.addeventListener ('DomContentloaded', () => {
      const parentContainer = document.getElementById ('natif-js-contrainer');
      if (parentContainer) {
          parentContainer.addeventListener ('click', (événement) => {
              const cible = event.target;
              if (target.classList.Contains ('remove-btn')) {
                  const item = cible.dataset.item;
                  supprimer la question (élément);
              }
          });
      }
      AddQuestionsNative (); // Vous devez toujours appeler cette fonction pour insérer HTML
  });

  Les délégués d'événements évitent les événements de liaison individuellement pour chaque élément dynamique, réduisent la consommation de mémoire et sont également efficaces pour les futurs éléments ajoutés.

Résumé et meilleures pratiques

Gestion des liaisons d'événements pour des éléments créés dynamiquement, que ce soit dans React ou natif JavaScript, ont leurs meilleures pratiques spécifiques:

1. Dans l'application React:

   • Embrassez JSX et Componentization: utilisez toujours JSX pour décrire l'interface utilisateur et utilisez des composants pour encapsuler la logique d'interface utilisateur réutilisable.
   • Évitez la manipulation directe de DOM: n'utilisez pas les API DOM natifs telles que le document.
   • Utilise des événements synthétiques: passer le gestionnaire d'événements comme un attribut d'un élément JSX, et React sera responsable de sa liaison et de sa gestion.

2. Dans JavaScript natif / HTML:

   • Priorité pour AddeventListener: Il s'agit du moyen standard et recommandé de lier les événements, qui offre une flexibilité, une maintenabilité et de puissantes capacités.
   • Délégation d'événements: Pour un grand nombre d'éléments ou d'éléments dynamiques qui peuvent être ajoutés à l'avenir, envisagez d'utiliser la délégation des événements pour améliorer les performances et la simplicité du code.
   • Assurez-vous que l'élément existe: avant de lier l'événement, assurez-vous de vous assurer que l'élément cible existe déjà dans le DOM.

Comprendre la différence entre Virtual Dom et Real Dom, et comment les navigateurs analysent les chaînes HTML et exécutent le code JavaScript, est la clé pour résoudre de tels problèmes. Suivre ces principes peut garantir que vos fonctions d'événements d'élément dynamique sont stables et fiables.

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!