phx-change 后更新表单字段的值

Question

我有一个 LiveView 应用程序，可以搜索机场代码。当用户输入时，ham它应该用 (String.upcase/1) 替换该表单字段的内容HAM，但事实并非如此。但根据我对我的代码的理解应该是这样。我需要更改什么才能用大写版本替换该字段中的所有输入？

\n\n

顺便说一句：如果我向其添加一个按钮并使用phx-submit而不是phx-change. 但我想让它为phx-change.

\n\n

\n\n

设置

\n\n

$ mix phx.new travelagent --live --no-ecto\n$ cd travelagent\n

\n\n

lib/travelagent_web/router.ex

\n\n

[...]\nscope "/", TravelagentWeb do\n  pipe_through :browser\n\n  live "/", PageLive, :index\n  live "/search", SearchLive\nend\n[...]\n

\n\n

lib/travelagent/airports.ex

\n\n

defmodule Travelagent.Airports do\n  def search_by_code(""), do: []\n\n  def search_by_code(code) do\n    list_airports()\n    |> Enum.filter(&String.starts_with?(&1.code, code))\n  end\n\n  def list_airports do\n    [\n      %{name: "Berlin Brandenburg", code: "BER"},\n      %{name: "Berlin Sch\xc3\xb6nefeld", code: "SXF"},\n      %{name: "Berlin Tegel", code: "TXL"},\n      %{name: "Bremen", code: "BRE"},\n      %{name: "K\xc3\xb6ln/Bonn", code: "CGN"},\n      %{name: "Dortmund", code: "DTM"},\n      %{name: "Dresden", code: "DRS"},\n      %{name: "D\xc3\xbcsseldorf", code: "DUS"},\n      %{name: "Frankfurt", code: "FRA"},\n      %{name: "Frankfurt-Hahn", code: "HHN"},\n      %{name: "Hamburg", code: "HAM"},\n      %{name: "Hannover", code: "HAJ"},\n      %{name: "Leipzig Halle", code: "LEJ"},\n      %{name: "M\xc3\xbcnchen", code: "MUC"},\n      %{name: "M\xc3\xbcnster Osnabr\xc3\xbcck", code: "FMO"},\n      %{name: "N\xc3\xbcrnberg", code: "NUE"},\n      %{name: "Paderborn Lippstadt", code: "PAD"},\n      %{name: "Stuttgart", code: "STR"}\n    ]\n  end\nend\n

\n\n

lib/travelagent_web/live/search_live.ex

\n\n

defmodule TravelagentWeb.SearchLive do\n  use TravelagentWeb, :live_view\n  alias Travelagent.Airports\n\n  def mount(_params, _session, socket) do\n    socket =\n      socket\n      |> assign(:airport_code, "")\n      |> assign(:airports, [])\n\n    {:ok, socket}\n  end\n\n  def handle_event(\n        "airport_code_search",\n        %{"airport_code" => airport_code},\n        socket\n      ) do\n    airport_code = String.upcase(airport_code)\n\n    socket =\n      socket\n      |> assign(:airport_code, airport_code)\n      |> assign(:airports, Airports.search_by_code(airport_code))\n\n    {:noreply, socket}\n  end\nend\n

\n\n

lib/travelagent_web/live/search_live.html.leex

\n\n

<form phx-change="airport_code_search">\n  <fieldset>\n    <label for="nameField">Airport Code</label>\n    <input type="text" name="airport_code" value="<%= @airport_code %>"\n    placeholder="e.g. FRA" \n    autofocus autocomplete="off" />\n  </fieldset>\n</form>\n\n<%= unless @airports == [] do %>\n  <h2>Search Results</h2>\n  <table>\n    <thead>\n      <tr>\n        <th>Airport Code</th>\n        <th>Name</th>\n      </tr>\n    </thead>\n    <tbody>\n      <%= for airport <- @airports do %>\n      <tr>\n        <td><%= airport.code %></td>\n        <td><%= airport.name %></td>\n      </tr>\n      <% end %>\n    </tbody>\n  </table>\n<% end %>\n

\n\n

JavaScript 控制台输出

\n\n

\n\n

phx-提交版本

\n\n

如果我使用这种形式：

\n\n

<form phx-submit="airport_code_search">\n  <fieldset>\n    <label for="nameField">Airport Code</label>\n    <input type="text" name="airport_code" value="<%= @airport_code %>"\n    placeholder="e.g. FRA" \n    autofocus autocomplete="off" />\n    <input class="button-primary" type="submit" value="Search Airport">\n  </fieldset>\n</form>\n

\n\n

我得到这个工作结果（输入fra并单击按钮后）：

\n\n

\n\n

PS：对于这个问题，JavaScript 或 CSS 有数百万种可能的解决方案。但我想知道如何使用 LiveView 正确解决这个问题。

\n

Answer 1

根据文档，

JavaScript 客户端始终是当前输入值的真实来源。对于任何具有焦点的给定输入，LiveView 永远不会覆盖输入的当前值，即使它偏离服务器渲染的更新。

这种情况的解决方案是使用JS hooks。