handle_event 不适用于 Phoenix LiveView 示例

Question

https://github.com/katpavan/liveview-testapp/blob/master/lib/liveviewapp_web/live/foo_live.ex

foo_live.ex ：

defmodule LiveviewappWeb.FooLive do
  use LiveviewappWeb, :live_view
  require Logger


  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, msg: "this is a message", results: %{})}
  end

  def render(assigns) do
    ~L"""
    <h1>Hello</h1>
    <div phx-keydown="keydown" phx-target="window">
    <%= @msg %>
    </div>      
    """
  end

  def handle_event("keydown", %{"key" => key}, socket) do
    Logger.debug "Var value: #{inspect(key)}"
    {:noreply, assign(socket, msg: key)}
  end
end

这是我进入页面时看到的。 但是当我点击 div 中的文本并输入时，handle_event 不会触发。

Answer 1

有几种方法可以实现这一点：

1. 将tabview=0设置为 div，更多细节参考这个答案：

   <div id="test" phx-keydown="keydown" tabindex="0">

2. 使用phx-window-keydown ，但这将使句柄全局化：

   <div id="test" phx-window-keydown="keydown">