Manejando Eventos

Es similiar al manejo de eventos en el DOM con alguans diferencias en la sintaxis.

<button onclick="activateLasers()">
  Activate Lasers
</butto
<?--En HTML-->

<button onClick={activateLasers}>
  Activate Lasers
</button>
//En React

Otra diferencia es que en React no puede retornar false para prevenir comportamiento por defecto. Se debe explicitamente llamar preventDefault. Ej en un HTML plano para prevenir el comportamiento por defecto de enviar un formulario, se puede escribir:

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

En React seria ⇒

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

Los manejadores de eventos por lo general se colocan como metodos de la clase, otro detalle es que no es necesario usar manejadores addEventListener en su lugar se colocan manejadores en el elemento a renderizar, esto esta bueno porque solo si el elemento es renderizado se colocan manejadores de eventos, en cambio con addEvent los manejadores ya estan generados se renderice o no el elemento.

Alternativas para ligar metodos a las clases:

Si no prefire usar bind existen dos alternativas. La primera es experimental y serian los campos publicos de clase, donde puede usar los campos de clases para ligar los callbacks correctamente:

class LoggingButton extends React.Component {

  // Esta sintaxis nos asegura que `this` está ligado dentro de handleClick
  // Peligro: esto es una sintaxis *experimental*
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
//Esta sintaxis esta habilitada por defecto en Create React App

Si no se usa la de campos publicos de clases, puedes usar una funcion flecha en el callback:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {

    // Esta sintaxis nos asegura que `this` esta ligado dentro de handleClick
    return (
      <button onClick={() => this.handleClick()}>

        Click me
      </button>
    );
  }
}

El problema con esta sintaxis 👆, es que un callback diferente es creado cada vez que LogginButton es renderizado, no seria un problema, sin embargo si este callback se pasa como una propiedad a componente mas bajos podria generar un problema de rendimiento.

Entonces creo que como una buena practica seria recomendado ligar mediante constructores (estandar), o la sintaxis de campo de clase (experimental).

Pasando argumentos o escuchadores de eventos

Dentro de un bucle es comunm querer pasar un parametro extra a un manejador de eventos. Por ejemplo, si id es el ID de una filam cualquiera de los codigos a continuacion podria funcionar:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Estas dos linas son equivalentes, una es usando la funcion flecha y la otra Function.prototype.bind respectivamente.

En ambos casos, el argumento e que representa el evento de React va a ser pasado como segundo argumento despues de ID. Con una funcion flecha, tenemos que pasarlo explicitamente, pero con bind cualquier argumento adicional es pasado automaticamente.

Glosario de palabras

Buscar conceptos