Todas y cada una de las páginas web modernas que creamos hoy tienden a tener interacciones con los usuarios. Cuando el usuario interactúa con la aplicación web, se disparan eventos. Ese evento puede ser un clic del mouse, presionar una tecla o algo raro como conectar la batería con un cargador. Desde el lado del desarrollador, necesitamos ‘escuchar’ dichos eventos y luego hacer que nuestra aplicación responda en consecuencia. Esto se llama manejo de eventos que proporciona una interfaz dinámica a una página web. Al igual que el DOM de JavaScript, React también nos proporciona algunos métodos integrados para crear un oyente que responda en consecuencia a un evento específico. Javascript tiene eventos para proporcionar una interfaz dinámica a una página web. Estos eventos están vinculados a elementos en el modelo de objetos de documento (DOM). Estos eventos por defecto utilizan la propagación burbujeante, es decir, hacia arriba en el DOM de los niños a los padres.
Creando una aplicación de reacción:
Paso 1: Cree una aplicación de reacción usando el siguiente comando
npx create-react-app app-name
Paso 2: una vez que haya terminado, cambie su directorio a la aplicación recién creada usando el siguiente comando
cd foldername
Estructura del proyecto: se verá como sigue.
El manejo de eventos con elementos React es muy similar al manejo de eventos en elementos DOM. Solo tienen algunas diferencias de sintaxis.
- Los eventos de reacción se nombran usando camelCase, en lugar de minúsculas.
- Con JSX, pasa una función como controlador de eventos, en lugar de una string.
En DOM:
<button onclick="printValues()"> Print </button>
en reaccionar:
<button onClick={printValues}>
Print
</button>
Al enviar el formulario, puede devolver falso como lo hacemos en HTML. En Reactjs debe llamar a preventDefault() explícitamente.
Enfoque: en la aplicación web Create React, vaya a App.js.
- En su App.js predeterminada, realice los siguientes cambios en el código.
- Aquí creamos un nombre de función de flecha como handleOnSubmit
- En la función, hacemos console.warn («Hiciste clic en la función de envío»)
- Haga un botón y agregue el evento onclick={handleOnSubmit}
App.js
import "./App.css";
function App() {
const handleOnSubmit = (e) => {
e.preventDefault();
console.warn("You clicked on submit function")
};
return (
<>
<h1>This is React WebApp </h1>
<form action="">
<button type="submit" onClick={handleOnSubmit}>
submit
</button>
</form>
</>
);
}
export default App;
Paso para ejecutar la aplicación: Ingrese el siguiente comando para ejecutar la aplicación.
npm start
Producción:
