在 Phoenix LiveView 中提交后重置表单输入字段

Question

我在 Phoenix LiveView 中有一个带有 phx-submit 绑定的表单。可以通过单击“发送”按钮或在文本字段中按回车键来提交表单。

我的问题是，如果我通过按回车键提交表单，输入字段不会被清除，但是如果我通过单击按钮提交，输入字段 IS 已清除。

我希望在这两种情况下都清除输入字段。

下面是我的表格：

<%= f = form_for :chat_form, "#", phx_submit: :send, phx_target: @myself %>
  <%= text_input f, :msg, autocomplete: "off" %>
  <%= submit "Send" %>
</form>

和我的 handle_event 实现：

def handle_event("send", %{"chat_form" => %{"msg" => msg}}, socket) do
  name = socket.assigns.name
  Endpoint.broadcast("chat", "new_msg", %{sender: name, text: msg})
  {:noreply, socket}
end

Answer 1

我认为您的问题可能与此有关 - https://github.com/phoenixframework/phoenix_live_view/issues/624。基本上Liveview不会修改焦点输入

因此，当您按 Enter 键时，您的注意力集中在文本输入上。

但是当您单击提交时，您的焦点会更改为让 Liveview 重置文本输入的按钮。

我认为至少有两种解决方案：

将 msg 值添加到您的状态，在模板中使用 value: @msg，并在 handle_event 中重置它（也许我会先尝试）
使用线程中建议的 Javascript 挂钩

希望对您有所帮助，希望我也是正确的！

Answer 2

你能删除 phx_target: @myself 吗？如果您使用 link 或按钮向自身发送事件，通常会使用它。如果您有表格，那么 phx_submit 足以完成此过程。

Answer 3

如果您使用上面提到的 value: @msg 方法并将其与表单上的 phi-change 事件相结合，您只需将 @msg 更新为已键入的任何内容，则设置@msg 回到 "" 超出了第一次调用的范围。

在 Phoenix LiveView 中提交后重置表单输入字段

Reset form input field after submit in Phoenix LiveView

elixir

phoenix-framework

phoenix

phoenix-live-view