Notas del curso Desarrollo de aplicaciones web con React 18

Una parte crucial de toda aplicación web es la interactividad, es decir, la capacidad para recoger información de la persona visitante y reaccionar, mostrando los resultados convenientes. Esta capacidad realmente se puede desglosar en dos aspectos complementarios:

• La habilidad de manejar eventos: cuando se hace clic sobre un botón, se rellena un campo de texto o se pasa el cursor por encima de un menú.
• La manipulación del estado de la aplicación: en el momento en que un dato se modifica, la actualización debe verse reflejada en todos los lugares donde se muestre o tenga efecto.

Hasta ahora hemos estudiado principalmente cómo mostrar información de diversa índole en la interfaz generada por un componente. Un aspecto importante a la hora de hacer interactiva esta interfaz es que tenga elementos manipulables por la persona visitante. En esta lección introduciremos los mecanismos por los que nuestra aplicación será capaz de responder a diferentes eventos.

Aunque las etiquetas HTML estándares proporcionan atributos relativos a eventos como onclick, onchange u onsubmit, es poco común su uso salvo en aplicaciones muy pequeñas o gestores de eventos que consistan en una línea de código. Lo más habitual es asociar los eventos a las funciones dentro del propio código JavaScript, por ejemplo mediante addEventListener.

Al escribir código con React, la definición de la interfaz pasa a ser parte de la lógica de la aplicación, por lo que tiene más sentido que volvamos a asociar los eventos a los elementos, en este caso, mediante las propiedades onClick, onChange, onSubmit, etc. Estas propiedades deben tener como valor una función, a diferencia de los atributos HTML clásicos en los que se suele introducir una llamada o directamente código JavaScript.

Por ejemplo, el siguiente código HTML consiste en un botón que al pulsarlo lanzaría una ventana de confirmación y otro que cierra un hipotético diálogo:

<button onclick="confirm('¿Seguro?')">Aceptar</button>
<button onclick="cerrarDialogo()">Cancelar</button>

El equivalente en React tendría este aspecto:

<button onClick={() => confirm('¿Seguro?')}>Aceptar</button>
<button onClick={cerrarDialogo}>Cancelar</button>

En apariencia guardan bastantes similitudes, pero hay que tener en cuenta que en React al asociar una función simplemente la nombramos (sin paréntesis). Y si queremos escribir código directamente, tenemos que encuadrarlo en una función anónima.

Dentro de un componente podemos declarar funciones que se invoquen cuando suceda un evento en la página. Estas funciones, a diferencia de la función correspondiente al componente, sí pueden tener efectos secundarios. Eso quiere decir que, para responder a un evento, podemos acceder o transmitir información a un almacén externo, realizar solicitudes a APIs, leer archivos, etc.

Volviendo a nuestra aplicación de lista de tareas, vamos a asociar una función eliminarTarea al evento onClick del botón de eliminar:

{completada &&
    <button onClick={eliminarTarea}>Eliminar</button>
}

Para que la función pueda ejecutarse, la podemos definir en el cuerpo del componente Tarea:

const Tarea = ({ titulo, completada }) => {
  const eliminarTarea = (event) => {
    // acciones para eliminar una tarea...
    console.log(`Tarea "${titulo}" eliminada.`)
  }
  // resto del componente
}

Puedes observar que eliminarTarea recibe como parámetro un objeto event nativo de JavaScript. En muchas ocasiones podemos omitirlo, si no lo necesitamos, para manipular la forma en que el navegador propaga o responde a los eventos. Pero habrá casos en los que necesitemos controlarlo.

Por ejemplo, imagina que tenemos un formulario para añadir una nueva tarea a la lista:

const FormularioNueva = () => {
  return (
    <form onSubmit={agregarTarea}>
      <input type="text" name="titulo" placeholder="Nueva tarea" />
    </form>
  )
}

En este caso, enviar el formulario supondría por defecto un refresco de la página. Para evitarlo, recurriremos al método preventDefault del objeto event, que bloqueará los efectos del envío:

const agregarTarea = (event) => {
  event.preventDefault()
  // código para añadir la tarea al almacén
  console.log("Nueva tarea añadida")
}

El objeto event también permite a la función que gestione el evento acceder al elemento que lo ha disparado mediante su propiedad target. De este modo podemos obtener datos, como por ejemplo el texto introducido en un campo.

Por ejemplo, mostramos en consola el título seleccionado para la nueva tarea cada vez que sufra un cambio:

const FormularioNueva = () => {
  return (
    <form onSubmit={agregarTarea}>
      <input type="text" name="titulo" placeholder="Nueva tarea"
      onChange={event => console.log(event.target.value)} />
    </form>
  )
}

En las próximas lecciones conoceremos los mecanismos para almacenar datos introducidos mediante eventos y modificar la información que muestra la aplicación, de forma que haremos posible el procesamiento de formularios mediante React.