Réagissez aux événements
Tout comme les événements HTML DOM, React peut effectuer des actions basées sur des événements utilisateur.
React a les mêmes événements que HTML : click, change, mouseover etc.
Ajout d'événements
Les événements React sont écrits en syntaxe camelCase :
onClick
au lieu de onclick.
Les gestionnaires d'événements React sont écrits entre accolades :
onClick={shoot} au lieu de
onClick="shoot()".
Réagir:
<button onClick={shoot}>Take the Shot!</button>
HTML :
<button onclick="shoot()">Take the Shot!</button>
Exemple:
Mettez la shootfonction à l'intérieur du
Footballcomposant :
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Obtenir une certification!
95 $ S'INSCRIRE
Passer des arguments
Pour passer un argument à un gestionnaire d'événements, utilisez une fonction fléchée.
Exemple:
Envoyer "Objectif !" en tant que paramètre de la shoot
fonction, en utilisant la fonction fléchée :
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Objet d'événement de réaction
Les gestionnaires d'événements ont accès à l'événement React qui a déclenché la fonction.
Dans notre exemple, l'événement est l'événement "clic".
Exemple:
Fonction Flèche : Envoi manuel de l'objet événement :
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function,
in this case the 'click' event
*/
}
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Cela nous sera utile lorsque nous examinerons le formulaire dans un chapitre ultérieur.