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

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

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

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

以下是我的表格：

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

我认为你的问题可能与此有关-。基本上，Liveview不会修改焦点输入

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

但是，当您单击提交时，您的焦点将更改为按钮，该按钮允许Liveview重置文本输入

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

• 将

  msg

  值添加到您的状态，在模板中使用

  value:@msg

  ，并在

  handle\u事件中重置它（可能是我首先尝试的）

• 按照线程中的建议使用Javascript挂钩

---

希望这有帮助，希望我也是正确的

你能移除

phx_目标：@imf

？当您使用链接或按钮向自身发送事件时，通常会使用它。如果您有一个表单，那么

phx_submit

就足以完成此过程。

如果您使用上面提到的

值：@msg

方法，并将其与表单上的

phi change

事件相结合，您只需将

@msg

更新为键入的内容，然后将

@msg

设置回“”在第一次呼叫之后工作。

我无法删除target@yourself。我需要它来让LiveComponent处理事件，而不是父LiveView。我尝试在表单中使用value:msg，然后在handle event中重置它。它在设置msg时第一次起作用，但由于msg从未被修改，因此以下不起作用的时间不会更改（msg已被设置为“”，并被设置为“”）。我用钩子把它固定好，然后把它推到右边，这是有道理的。我只记得不久前我在textarea上遇到过这样的小麻烦。希望它在未来的版本中得到改进。

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