Schaltfläche onClick-Ereignis in React

Wir werden die Verwendung des Buttons onClick Ereignisses in React vorstellen.

Verwenden das onClick-Ereignis in einem Button in React

Bei der Entwicklung einer Webanwendung oder kommerzieller Software müssen wir onClick-Ereignisse verwenden, um viele Funktionen auszuführen.

Dieses Tutorial wird ein Beispiel durchgehen und eine neue React-Anwendung mit einer Schaltfläche mit einem onClick-Ereignis erstellen.

Lassen Sie uns also eine neue React-Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# react
npx create-react-app my-app

Nachdem wir unsere neue Anwendung in React erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# react
cd my-app

Lassen Sie uns unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# react
npm start

Nun geben wir einen Button in App.js mit einem onClick-Event der Funktion h() zurück.

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

Lassen Sie uns die Funktion h() erstellen, die einen Wert console.log enthält.

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

Lassen Sie uns mithilfe von CSS einige Stile zu unseren Schaltflächen hinzufügen.

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

Ausgabe:

Mit diesen einfachen Schritten können wir ganz einfach beliebige onClick-Ereignisse auf Schaltflächen erstellen und beliebige Funktionen übergeben. Überprüfen Sie den Code hier.