Phaser - 在创建函数之外使用 getChildByName 访问 DOM 元素

Question

我正在创建函数中向我的 canvas 添加 html 表单。我希望能够在用户按下 Enter 键时提交表单。为此，我添加了关键侦听器并在更新函数中寻找 class Phaser.Input.Keyboard 的 JustDown 回调。但是有一个问题，当我从 update() 回调调用我的 validateFrom 方法时，它无法使用 getChildByName 函数获取值。当我从 create() 回调中调用验证表单函数时，同样工作正常。

我的代码如下：

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
 
  }

}

Answer 1

对于未来的读者，我最终使用了 vanilla javascript 中的 addListener 函数，而不是使用 Phaser 提供的输入键侦听器，如下所示。之后一切正常。我仍然找不到不工作的原因。

this.formInput.addListener('keypress');
this.formInput.on('keypress', (e) => {
  if(e.code === "Enter") {
    validateFormIdentity()
  }
});

Phaser - 在创建函数之外使用 getChildByName 访问 DOM 元素

Phaser - access DOM elements using getChildByName outside of create function

javascript

reactjs

phaser-framework