Alpine 在 JavaScript 內部使用關鍵事件處理程序的正確方法

Question

我正在嘗試構建一個簡單的應用程序，您可以在其中使用箭頭鍵執行某些操作。 並試圖讓前端做出適當的反應。 但到目前為止，我還無法更新 x-data 中的數據。

簡單的流程

• 按向上箭頭鍵
• keyDownHandler 觸發
• upPressed 設置為 true
• 向上箭頭鍵釋放
• keyUpHandler 觸發
• upPressed 再次設置為 false。

但這不起作用，因為事件處理程序無法從注冊位置設置 this.upPressed。

有任何想法嗎？

HTML

<div x-data="loadComponent()" x-init="init">
    Right: <span x-text="rightPressed"></span><br>
    Left: <span x-text="leftPressed"></span><br>
    Up: <span x-text="upPressed"></span><br>
    Down: <span x-text="downPressed"></span>
</div>

JavaScript

function loadComponent() {
    return {
        rightPressed: false,
        leftPressed: false,
        upPressed: false,
        downPressed: false,
    init: function() {
        document.addEventListener("keydown", this.keyDownHandler, false)
            document.addEventListener("keyup", this.keyUpHandler, false)
    },
    keyUpHandler(e) {
      console.log(e.key) //loggin the key up event
      if(e.key == "Right" || e.key == "ArrowRight") {
        this.rightPressed = false
      }
      else if(e.key == "Left" || e.key == "ArrowLeft") {
        this.leftPressed = false
      }
      else if (e.key == "Up" || e.key == "ArrowUp") {
        this.upPressed = false
      }
      else if (e.key == "Down" || e.key == "ArrowDown") {
        this.downPressed = false
      }
        },
    keyDownHandler(e) {
      console.log(e.key) // login the key down event
      if(e.key == "Right" || e.key == "ArrowRight") {
        this.rightPressed = true
      }
      else if(e.key == "Left" || e.key == "ArrowLeft") {
        this.leftPressed = true
      }
      else if (e.key == "Up" || e.key == "ArrowUp") {
        this.upPressed = true
      }
      else if (e.key == "Down" || e.key == "ArrowDown") {
        this.downPressed = true
      }
        },
    }
}

Answer 1

您可以將 object 分配給一個變量，並引用它，或者您可以包裝回調， this成為您的 object （前提是使用正確的this調用init ）。

對於第二種解決方案：

init: function() {
    document.addEventListener("keydown", e => this.keyDownHandler(e), false);
    document.addEventListener("keyup", e => this.keyUpHandler(e), false);
}