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

【问题标题】：Reset form input field after submit in Phoenix LiveView在 Phoenix LiveView 中提交后重置表单输入字段
【发布时间】：2020-11-20 05:06:14
【问题描述】：

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

我的问题是，如果我通过按 enter 键提交表单，输入字段 IS NOT 被清除，但是如果我通过单击按钮提交，输入字段 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

【问题讨论】：

标签： elixir phoenix-framework phoenix phoenix-live-view

【解决方案1】：

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

因此，当您按 Enter 时，您的焦点就在文本输入上。

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

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

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

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

【讨论】：

我尝试在表单中设置 value: msg，然后在句柄事件中将其重置。它在设置 msg 时第一次工作，但由于 msg 从未修改过，因此以下时间它不起作用，因为分配没有更改（msg 已经“”并设置为“”）。我用钩子和 push_event 修复了它
对，有道理。我只记得前段时间我在 textarea 中遇到过类似的“问题”。希望它在未来的版本中得到改进。

【解决方案2】：

如果您使用上面提到的value: @msg 方法并将其与表单上的phi-change 事件相结合，您只需将@msg 更新为已键入的任何内容，然后将@msg 设置回“”在第一次调用之后工作。

【讨论】：

【解决方案3】：

你能删除phx_target: @myself吗？如果您使用链接或按钮向自身发送事件，通常会使用它。如果你有一个表格，那么phx_submit 就足够了。

【讨论】：

我无法删除目标@myself。我需要这个让 LiveComponent 处理事件而不是父 LiveView