Evento Href onClick en React

  2. HowTo
  3. React Howtos
  4. Evento Href onClick en React
MD Aminul Islam 12 octubre 2023
React React Event
Evento Href onClick en React

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:

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

    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;

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 :

This 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.

Autor: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

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.

LinkedIn

Artículo relacionado - React Event