Botón onClick Evento en React

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