Href onClick-Ereignis in React

MD Aminul Islam 12 Oktober 2023

React React Event

Manchmal müssen wir bestimmte Aktionen ausführen, wenn wir auf einen Link klicken. Gehen Sie zum Referenzlink und verwenden Sie ihn als Schaltfläche.

In React JS ist das Erstellen einer Aktion im Tag <a> ... </a> einfach, ohne auf den in href angegebenen Link zu gehen.

Dieser Artikel zeigt uns, wie wir mit href eine Aktion für das Tag <a> ... </a> erstellen können. Außerdem werden wir jeden Schritt mit Beispielen und Erklärungen sehen, um das Thema einfacher zu machen.

Erstellen Sie eine `onClick`-Aktion auf `<a> ... </a>`-Tag mit `href`

Führen Sie die folgenden Schritte aus, um eine onClick-Funktion für das <a> ... </a>-Tag zu erstellen.

Zuerst müssen wir ein bestimmtes `<div> ... </div>`-Element erstellen, das die Komponente enthält. Das `HTML` sieht wie folgt aus.

Code - index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta
	  name="description"
	  content="Web site created using create-react-app"
	/>
	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
	<title>React App</title>
  </head>
  <body>
	<div id="root"></div>
  </body>
</html>

Jetzt müssen wir an der Datei `App.js` arbeiten. Diese Datei sieht wie folgt aus.

Code - App.js:

import './App.css';

function App() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('This is a link click action');
  }

  return (
	<a href='#' onClick={handleClick}>
	  Click me
	</a>
  );
}
export default App;

Zuerst haben wir unsere Ressourcen mit der Zeile import './App.css'; importiert. Innerhalb der Funktion erstellen wir ein Click-Event, handleClick, das die Aktion enthält, wenn auf den Link geklickt wird.

Innerhalb dieses Klickereignisses durch die Zeile e.preventDefault(); Wir haben alle Standardaktionen deaktiviert. Danach haben wir die Aktion console.log('This is a link click action'); Dadurch wird die Nachricht auf der Konsole angezeigt, wenn auf den Link geklickt wurde.

Nachdem Sie das Beispiel ausgeführt haben, erhalten Sie die folgenden Texte in Ihrer Webkonsole.

Ausgang:

This is a link click action

Die in diesem Artikel geteilten Beispielcodes wurden im React JS-Projekt geschrieben. Ihr System muss die neueste Node JS-Version enthalten, um ein React-Projekt auszuführen.

Autor: MD Aminul Islam

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

Erstellen Sie eine onClick-Aktion auf <a> ... </a>-Tag mit href

Zuerst müssen wir ein bestimmtes <div> ... </div>-Element erstellen, das die Komponente enthält. Das HTML sieht wie folgt aus.

Jetzt müssen wir an der Datei App.js arbeiten. Diese Datei sieht wie folgt aus.

Verwandter Artikel - React Event

Erstellen Sie eine `onClick`-Aktion auf `<a> ... </a>`-Tag mit `href`

Zuerst müssen wir ein bestimmtes `<div> ... </div>`-Element erstellen, das die Komponente enthält. Das `HTML` sieht wie folgt aus.

Jetzt müssen wir an der Datei `App.js` arbeiten. Diese Datei sieht wie folgt aus.