Événement onClick d'un bouton en React

Nous introduirons l’utilisation du bouton événement onClick dans React.

Utiliser l’événement onClick dans un bouton dans React

Lors du développement d’une application Web ou d’un logiciel commercial, nous devons utiliser des événements onClick pour exécuter de nombreuses fonctions.

Ce tutoriel passera par un exemple et créera une nouvelle application React avec un bouton avec un événement onClick.

Créons donc une nouvelle application React en utilisant la commande suivante.

# react
npx create-react-app my-app

Après avoir créé notre nouvelle application dans React, nous irons dans notre répertoire d’application à l’aide de cette commande.

# react
cd my-app

Exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# react
npm start

Maintenant, nous allons retourner un bouton dans App.js avec un événement onClick de la fonction h().

# react
<button onClick={() => h()}>Click This Button </button>;

Créons la fonction h() qui va console.log une valeur.

# react
function h() {
    console.log("Button Clicked");
  }

Ajoutons quelques styles à nos boutons en utilisant CSS.

# react
button {
  background: black;
  color: white;
  border: none;
  padding: 15px 15px;
}
button:hover {
  background: white;
  color: black;
  border: 1px solid black;
}

Production :

Nous pouvons facilement créer des événements onClick sur les boutons et transmettre toutes les fonctions en suivant ces étapes simples. Vérifiez le code ici.