如何清除 Phoenix LiveView 表單中的文本區域？

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沒有清空。 如何在不使用 Javascript 的情況下清除輸入？

如果沒有 Javascript 我不能做到，我怎么能用Javascript 做到這一點，但又不繞過 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