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

Question

我一直在使用 DHH 提供的演示测试 Hotwire。我有一个默认的 rails 6 设置，并且我知道它会从 rails 5 < Assets 管道重新创建 javascript 文件夹结构。我遇到的问题是表单在提交后不会重置文本字段 - 尽管设置了刺激 Controller 以使用此特定操作。 用户提交表单后如何重置热线表单 ?我的代码如下
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

Answer 1

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

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