Phoenix LiveView 表单提交，清除/重置输入值答案

【问题标题】：Phoenix LiveView form submit, clear/reset input valuePhoenix LiveView 表单提交，清除/重置输入值
【发布时间】：2022-01-27 13:56:27
【问题描述】：

我创建了这个简单的表单，我在 LiveView 组件中处理它。提交此表单后，社区清除/重置表单的最佳做法是什么？

我确实想考虑验证等。这是否总是通过 Ecto.Changeset，即使没有架构直接支持表单？

  def handle_event("add", %{"text" => text}, socket) do
    IO.inspect(text)
    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <form phx-submit="add">
      <input type="text" name="text" placeholder="What needs to be done?" autofocus>
      <input type="submit" />
    </form>
    """
  end

【问题讨论】：

成功提交表单后，您应该将用户引导至另一个页面或视图，以便 UX 向用户提供反馈，表明他们在提交表单时所做的一切都是正确的。使用此方法，您无需担心重置表单，因为当用户导航返回以使用表单创建新内容时，它会像第一次一样为空白。
嗯，在这种情况下考虑像 SPA 或 LiveView 这样的交互式应用程序时，这种思维方式是否也有效？除此之外，这是一个 TodoMVC 示例应用程序，因此该页面既添加了一个 todo 又显示了所有 todo 的列表（也是新创建的）。
在生成新的 Phoenix 项目并使用 LiveView 生成器时，使用 new 或 edit 创建新记录会呈现一个模式对话框表单以创建或更新记录。创建记录后，用户可以留在页面上。我不确定为什么这不适用于您的用例。

标签： elixir phoenix phoenix-live-view

【解决方案1】：

LiveView 应在提交后自动重置输入字段，但这可能是 Ecto 唯一的事情。如果你想清除输入，你也可以为此编写一个 JS 钩子。这很简单。

您始终可以使用 Flash 消息将用户重定向到某个地方以获得更好的用户体验。

【讨论】：