Evento Href onClick en React

MD Aminul Islam 12 octubre 2023 React React Event

A veces necesitamos realizar acciones específicas cuando hacemos clic en un enlace. Vaya al enlace de referencia y utilícelo como un botón.

En React JS, crear una acción en la etiqueta <a> ... </a> es fácil sin ir al enlace especificado en href.

Este artículo nos mostrará cómo podemos crear una acción para la etiqueta <a> ... </a> con href. Además, veremos cada paso con ejemplos y explicaciones para facilitar el tema.

Cree una acción `onClick` en la etiqueta `<a> ... </a>` con `href`

Para crear una función onClick en la etiqueta <a> ... </a>, siga los pasos a continuación.

Primero, necesitamos crear un elemento `<div> ... </div>` específico que contenga el componente. El `HTML` tendrá el siguiente aspecto.

Código - index.html:

HTML

 htmlCopy<!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>

Ahora, necesitamos trabajar en el archivo `App.js`. Este archivo tiene el siguiente aspecto.

Código - App.js:

JavaScript

 javascriptCopyimport './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;

Primero, importamos nuestros recursos por la línea importar './App.css';. Dentro de la función, creamos un evento de clic, handleClick, que contiene la acción cuando se hace clic en el enlace.

Dentro de este evento de clic, a través de la línea e.preventDefault(); deshabilitamos todas las acciones predeterminadas. Después de eso, creamos la acción console.log('Esta es una acción de clic en enlace'); que mostrará el mensaje en la consola cuando se hizo clic en el enlace.

Después de ejecutar el ejemplo, obtendrá los siguientes textos en su consola web.

Producción :

 textCopyThis is a link click action

Los códigos de ejemplo compartidos en este artículo están escritos en el proyecto React JS. Su sistema debe contener la última versión de Node JS para ejecutar un proyecto React.

¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. Suscríbete

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.

Cree una acción onClick en la etiqueta <a> ... </a> con href

Primero, necesitamos crear un elemento <div> ... </div> específico que contenga el componente. El HTML tendrá el siguiente aspecto.

Ahora, necesitamos trabajar en el archivo App.js. Este archivo tiene el siguiente aspecto.

Artículo relacionado - React Event

Cree una acción `onClick` en la etiqueta `<a> ... </a>` con `href`

Primero, necesitamos crear un elemento `<div> ... </div>` específico que contenga el componente. El `HTML` tendrá el siguiente aspecto.

Ahora, necesitamos trabajar en el archivo `App.js`. Este archivo tiene el siguiente aspecto.