elixir - 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 不会触发。

标签： elixirphoenix-framework

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">