1

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

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

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

下面是我的表格：

<%= 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
4

3 回答 3

2

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

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

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

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

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

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

于 2020-08-30T01:04:35.067 回答
1

如果您使用value: @msg上面提到的方法并将其与表单上的一个phi-change事件结合起来，您可以简单地将其更新@msg为已键入的任何内容，那么将@msgback 设置为 "" 将在第一次调用之后起作用。

于 2020-11-19T21:06:14.797 回答
0

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

于 2020-08-30T01:16:55.843 回答