JSFiddle - React, Tailwind, and code Playground

by mrroot5

HTML

<form action="#" method="post" id="saludamos">
  <input type="text" name="saluda" placeholder="Saluda" />
  <input type="submit" value="Calcular" />
</form>

JavaScript

// Clase en ES6 (ECMAScript 6)
// Si estás familiarizado con la programación
// orientada a objetos deberías entender este código
class Saluda {
  constructor() {
    this.hola = "Hola Mundo!";
  }
  
  get hello() {
    return this.hola;
  }
  
  saludar(ev) {
  	ev.preventDefault();
    // FormData actua similar al serialize de jquery.
		var data = new FormData(ev.currentTarget);
    window.console.log(this)
    // Este this funciona en ambos casos porque
    // javascript interpreta que quieres crear
    // una propiedad nueva dinámicamente
    // llamada hola. Fíjate en las salidas
    // de los console.log.
    window.console.log(this.hola)
    this.hola = data.get("saluda")
    window.console.log(this.hola)
    // Esta es la línea del problema.
    // Recordemos que el scope de JS hace que this
    // no sea el objeto Poligono en sí,
    // this equivale al elemento que disparó el evento.
    // Si usamos el código erróneo hello devolverá undefined
    window.console.log("Me gusta saludar con un: " + this.hello);
  }
}

var saludo = new Saluda();
// Este código, que podría ser lo que sueles usar,
// no va a funcionar debido al scope de javascript.
// Adelante, descomenta esta línea y comenta el siguiente
// adevenlistener para que veas las diferencias del this.
// document.getElementById("saludamos").addEventListener("submit", saludo.saludar);

// Aqui tenemos el codigo correcto, fijate en la funcion "bind"
document.getElementById("saludamos").addEventListener("submit", saludo.saludar.bind(saludo));