Botón onClick Evento en React
![Botón onClick Evento en React](/img/React/feature-image---react-button-onclick.webp)
Lo introduciremos usando el botón evento onClick
en React.
Use el evento onClick
en un botón en React
Al desarrollar una aplicación web o software comercial, necesitamos usar eventos onClick
para realizar muchas funciones.
Este tutorial pasará por un ejemplo y creará una nueva aplicación React con un botón con un evento onClick
.
Entonces, creemos una nueva aplicación React usando el siguiente comando.
# react
npx create-react-app my-app
Después de crear nuestra nueva aplicación en React, iremos a nuestro directorio de aplicaciones usando este comando.
# react
cd my-app
Ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.
# react
npm start
Ahora, devolveremos un botón en App.js
con un evento onClick
de la función h()
.
# react
<button onClick={() => h()}>Click This Button </button>;
Vamos a crear la función h()
que console.log
un valor.
# react
function h() {
console.log("Button Clicked");
}
Agreguemos algunos estilos a nuestros botones usando CSS.
# react
button {
background: black;
color: white;
border: none;
padding: 15px 15px;
}
button:hover {
background: white;
color: black;
border: 1px solid black;
}
Producción:
Podemos crear fácilmente cualquier evento onClick
en los botones y pasar cualquier función siguiendo estos sencillos pasos. Verifique el código aquí.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn