使用 Hotwire 和 Stimulus.js Rails 6 提交后重置表单的问题答案

【问题标题】：Issue with resetting form after submission using Hotwire & Stimulus.js Rails 6使用 Hotwire 和 Stimulus.js Rails 6 提交后重置表单的问题
【发布时间】：2021-04-04 06:52:45
【问题描述】：

我一直在使用 DHH 提供的演示测试 Hotwire。我有一个默认的 rails 6 设置，并且我知道它会从 rails 5 用户提交表单后，如何重置hotwire表单？我的代码如下

new.html.erb

<%= turbo_frame_tag 'new_conversation_comment', target: '_top' do %>
<%= form_with(model: [@conversation, @conversation_comment],
              data: { controller: "reset_form", action: 'turbo:submit-end->reset_form#reset' }, html: {class: 'form-inline'}) do |form| %>
    <%= form.submit 'Post', class: 'btn btn-primary mb-2', style: 'float: right;', 'data-reset_form-target': 'button' %>
  
    <div style="overflow: hidden; padding-right: .5em;">
      <%= form.text_field :content, class: 'form-control' %>
    </div>
<% end %>

_conversation_comment.html.erb

 <div class="p-1">
    <%= conversation_comment.content %>
    </div>

show.html.erb

  <div class="p-2">
     <%= turbo_stream_from @conversation %>
     <%= turbo_frame_tag 'conversation' do %>
         ....
     <% end %>
     <div class="conversation-comments-container" id="conversation_comments">
          <%= render @conversation.conversation_comments %>
     </div>
       <hr>
<%= turbo_frame_tag 'new_conversation_comment', src: new_conversation_conversation_comment_path(@conversation), target: :_top %>
</div>

assets/javascripts/controllers/reset_form_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
    reset() {
        this.element.reset()
    }
}

免责声明：我使用的是 Webpack 4.0

【问题讨论】：

我也有同样的问题，还是想不通。你修好了吗？

标签： javascript ruby-on-rails stimulusjs

【解决方案1】：

根据设置，控制器名称之间的下划线可能是个问题。在我的情况下，用破折号代替它。

turbo:submit-end->reset-form#reset

【讨论】：

我会尽快报告我的结果。
我更新了 gem，因为我猜它有一个自动加载问题——然而，刺激没有连接到表单来重置它。
您能上传一个包含聊天组件的要点吗？
@valcod3r 我已经创建了一个要点； gist.github.com/cbilgili/c78f8e89515cd807f817f35d721570a6 您的刺激控制器连接了吗？您可以通过将 console.log 添加到 gist 中的“连接”方法来检查这一点。
是的，命名约定不正确——这是正确的解决方案。

【解决方案2】：

免责声明：我使用的是 Webpack 4.0

我也遇到了同样的问题，也是使用 Webpack。

我的解决方案是：

如 Canbey 所说，将下划线改为破折号。
将刺激控制器从 app/assets/javascripts/controllers/ 移动到 app/javascripts/controllers/（有点像 the stimulus docs 以便 webpack 正确导入它 - 我的 application.js 文件是从该目录而不是 app/assets/javascripts 导入控制器。

【讨论】：

【解决方案3】：

半 SJR，半 Hotwire 方法是这样的：

这里的工作示例：https://rails-react-bootstrap.herokuapp.com/rooms

new.html.erb

<%= turbo_frame_tag 'new_note' do %>
  <%= form_with model: [@room, @note] do |form| %>
    <!-- Allow body validation error without message -->
    <div class="form-group">
      <%= form.rich_text_area :body, class: 'form-control comments', id: 'bodyText' %>
    </div><!-- .form-group -->
    <div class="form-group d-flex justify-content-center">
      <%= form.submit 'Add Note', class: 'btn btn-lg btn-tayberry btn-block' %>
    </div><!-- .form-group -->
  <% end %>
<% end %>

create_js.erb

// clear note textarea after submit
var input = document.getElementById("bodyText");
input.value = '';

notes_controller

  def create
    @note = @room.notes.create!(note_params)
    # @note.user = current_user
    respond_to do |format|
      if @note.save
        format.turbo_stream
        format.html { redirect_to @room }
        format.js
      else
        format.html { render action: 'new' }
      end
    end
  end

【讨论】：

【解决方案4】：

如果您仍然需要答案，以下是实现您需要的方法：

在你的控制器中响应这样的请求：

format.html { redirect_to conversations_url }

注意：重定向到定义 new_conversation_comment 框架的页面（即您提交表单的同一页面）。会发生重定向，但 Hotwire 会用新的形式代替您的表格，并在您指定的地方附加注释。这有点神奇。

我建议你看看这个视频：

https://gorails.com/episodes/hotwire-rails?autoplay=1

【讨论】：