Question

我有一个不带数据层支持的窗体的Phoenix LiveView，如下所示：

<%= f = form_for :post, "#", [phx_submit: :create_post %>
  <%= textarea f, :message, placeholder: "Say something:" %>
  <%= hidden_input f, :user_id, value: @current_user.account_id %>
  <%= submit "Post" %>
</form>

我无法使用变更集支持表单，因为我没有使用Ecto。提交表单后，可以很好地处理提交，但是不会清除表单textarea。如何不借助Java脚本清除输入内容？

如果我不能没有Java脚本，该如何使用Java脚本实现，而又没有绕过LiveView phx-submit机制呢？

一些其他疑难解答信息：

这是我的事件处理程序：

def handle_event("create_post", %{"post" => post_params}, socket) do
  thread_id = socket.assigns.thread.id
  user_id = post_params["user_id"]
  posts = Forums.append_post!(thread_id, user_id, post_params)
  UdsWeb.Endpoint.broadcast_from(self(), build_topic(thread_id), "new_post", %{posts: posts})
  {:noreply, assign(socket, :posts, posts)}
end

我尝试了几种不同的方法来解决此问题，主要涉及支持表单的数据结构的变化。

我尝试用地图支持表单。这行不通，因为表单必须以实现Phoenix.HTML.FormData协议的结构作为后盾，而Phoenix仅为Plug.Conn和Atom
我尝试使用结构，但这出于与地图相同的原因而无法使用
我没有Conn可以在表单中使用，因为它是LiveView，但是我可以在LiveView控制器中创建Conn，因此可以。我用它支持表单，并在事件处理程序中传递了一个新实例以进行后期创建。这不能解决问题。
最后，我将textarea更改为text_input，并在提交表单后立即清除了此输入。因此，看来问题是特定于textarea元素的。我不确定这是否是Phoenix的错误。

Answer 1

正如Aleksei在评论中所说：您必须将新的Post结构从控制器传递给视图。例如这样的

def handle_event("create_post", post, socket) do
    # Here do what you want with the data from the "post" parameter

    {:noreply, assign(socket, :post, %Post{})}   
end

Answer 2

即使它的行为类似于SPA，也并非SPA，因此您仍然需要使用后端路由器并将其重定向回index页。您的表单位于index页面上，但资源不是post's index页面，而是post/new。

因此，您需要使用push_redirect（而不是redirect）：

|> push_redirect(to: UdsWeb.post_index_path(socket, :index))

def handle_event("create_post", %{"post" => post_params}, socket) do
  thread_id = socket.assigns.thread.id
  user_id = post_params["user_id"]
  posts = Forums.append_post!(thread_id, user_id, post_params)
  UdsWeb.Endpoint.broadcast_from(self(), build_topic(thread_id), "new_post", %{posts: posts})
  {:noreply,
   socket
   |> push_redirect(to: UdsWeb.post_index_path(socket, :index))}
end

十六进制：https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#push_redirect/2

如何在Phoenix LiveView表单中清除文本区域？

2 个答案: