Estoy agregando un formulario html a mi lienzo dentro de la función de creación. Quiero poder enviar el formulario cuando un usuario presione la tecla Enter . Para esto, agregué el oyente clave y dentro de la función de actualización estoy buscando la devolución de llamada JustDown de la clase Phaser.Input.Keyboard . Pero hay un problema, cuando llamo a mi método validateFrom desde la devolución de llamada de update() , no puede obtener los valores usando la función getChildByName . Lo mismo funciona bien cuando llamo a la función de formulario de validación desde la devolución de llamada create() .
Mi código se da a continuación:
export default class Identity extends Phaser.Scene { constructor() { super({ key: "ABC" }); this.enterKeyIdentity; console.log("constructor ....") } preload() { this.load.html("identity_form", "/assets/forms/Unlock1/identity.html"); } create() { this.formInput = this.add.dom(0, 0).createFromCache("identity_form"); this.formInput.originX = 0; this.formInput.originY = 0; this.enterKeyIdentity = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER); // the input values are fetched fine when accessed from here this.formInput.getChildByName("submit").onclick = () => { this.validateFormIdentity(); }; } update () { if(Phaser.Input.Keyboard.JustDown(this.enterKeyIdentity)) { console.log("pressed down"); this.validateFormIdentity(); // input values are not fetched properly when called from here } } validateFormIdentity = () => { console.log("submit called") let city1 = this.formInput.getChildByName("city1").value; let city2 = this.formInput.getChildByName("city2").value; let city3 = this.formInput.getChildByName("city3").value; console.log(city1, city2, city3) // prints actual values when invoked from create function // prints empty "" spaces when invoked from update function } }Para futuros lectores, terminé usando la función addListener de vanilla javascript en lugar de usar oyentes de teclas de entrada proporcionados por Phaser como se muestra a continuación. Estaba funcionando bien después de eso. Todavía no pude encontrar la causa detrás de que no funciona.
this.formInput.addListener('keypress'); this.formInput.on('keypress', (e) => { if(e.code === "Enter") { validateFormIdentity() } });