Question

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

我的问题是，如果我按Enter键提交表单，则清除输入字段不是，但是如果我通过单击按钮提交，则输入字段 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吗？通常，如果您使用链接或按钮将事件发送给自己，则通常使用它。如果您有表格，那么phx_submit就足够了。

Answer 3

如果您使用上面提到的value: @msg方法并将其与表单上的phi-change事件结合，您可以简单地将@msg更新为键入的内容，则设置{ {1}}返回“”的工作范围超出了首次通话。

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

3 个答案: