在 JavaScript 中使用关键事件处理程序的 Alpine 正确方法答案

【问题标题】：Alpine correct way of using key event handlers inside of the JavaScript在 JavaScript 中使用关键事件处理程序的 Alpine 正确方法
【发布时间】：2022-02-06 02:21:18
【问题描述】：

我正在尝试构建一个简单的应用程序，您可以在其中使用箭头键执行某些操作。并试图让前端做出适当的反应。但到目前为止，我还无法更新 x-data 中的数据。

简单的流程

按向上箭头键
keyDownHandler 触发
upPressed 设置为 true
向上箭头键释放
keyUpHandler 触发
upPressed 设置为假再次。

但这不起作用，因为事件处理程序无法从注册位置设置 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
      }
        },
    }
}

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

您可以将对象分配给一个变量，并引用它，或者，您可以包装回调，使this 成为您的对象（前提是init 使用正确的this 调用）。

对于第二种解决方案：

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

【讨论】：