React dossier dactylography obtenez l'attribut Data de Click Event

Question

Donc j'ai un React composant avec un bouton qui dispose d'un gestionnaire de clic qui utilise l'attribut Data- *. Si ceci était droit React puis je sais que je sais comment Obtenez la valeur de l'attribut Data- *. Cependant, j'apprends comment utiliser dactylographyScript, donc je ne sais pas comment accéder à cet attribut. Alors quelle est la meilleure façon d'accéder à l'attribut Data- * à l'aide de documents.

Ceci est mon code JSX pour le bouton:

<button type="button" className="NavLink" data-appMode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>Main</button>

Ceci est mon gestionnaire pour l'événement de clic:

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    // What code should go here to access the data-appMode attribute?
}

Answer 1

Dans votre fonction d'événement, vous avez une variable E, e représente un événement déclenché en cliquant sur le bouton, E possède une propriété cible afin d'accéder à un attribut de l'élément à faire:

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    const target = e.target as HTMLElement;
    let attr = target.getAttribute("data-attribute-name-here");
    //do something

}