如何重构表单字段与Stimulus JS避免重复设置data-action

我现在用Stimulus JS做了个控制器，用来在输入字段变化时启用提交按钮。但目前每个表单字段都得重复加data-action='input->enable-submit-button-if-fields-changed#enableSubmit'，想问问能不能只靠表单上的data-controller就实现所有输入字段触发逻辑，不用每个字段都重复设置？

原表单代码：

<%= 
  form_for(
    model,
    html: {
      :'data-controller' => 'enable-submit-button-if-fields-changed'
    }
  ) do |form|
%>
  <%= form.text_field(:title, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
  <%= form.text_area(:description, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
  <%= form.file_field(:picture, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
  <%= form.check_box(:delete_image, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
  <%#= other input fields... %>
<% end %>

原Stimulus控制器代码：

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="enable-submit-button-if-fields-changed"
export default class extends Controller {
  connect() {
    this.element.querySelector('input[type=submit]').disabled = true;
  }

  enableSubmit() {
    this.element.querySelector('input[type=submit]').disabled = false;
  }
}

解决方案：不用重复加data-action，两种实现方式 #

你完全可以不用给每个字段加data-action，直接在控制器里处理事件监听就行，推荐下面两种方式：

方式1：给所有现有输入元素绑定事件 #

先把表单里每个字段的data-action删掉，只保留表单上的data-controller：

<%= 
  form_for(
    model,
    html: {
      :'data-controller' => 'enable-submit-button-if-fields-changed'
    }
  ) do |form|
%>
  <%= form.text_field(:title) %>
  <%= form.text_area(:description) %>
  <%= form.file_field(:picture) %>
  <%= form.check_box(:delete_image) %>
  <%#= other input fields... %>
<% end %>

然后修改控制器，在connect方法里获取所有输入元素，绑定input事件：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 缓存提交按钮，避免重复查询DOM
    this.submitButton = this.element.querySelector('input[type=submit]')
    this.submitButton.disabled = true;

    // 获取表单内所有输入、文本域、下拉选框
    const inputs = this.element.querySelectorAll('input, textarea, select');
    inputs.forEach(input => {
      input.addEventListener('input', () => this.enableSubmit());
    });
  }

  enableSubmit() {
    this.submitButton.disabled = false;
  }
}

方式2：事件委托（更推荐，支持动态字段） #

如果你的表单里会动态添加输入字段（比如通过JS新增选项），用事件委托更合适——直接在表单元素上监听事件，所有子元素的input事件都会冒泡到表单上，不用管元素是一开始就有还是后来加的：

控制器代码改成这样：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.submitButton = this.element.querySelector('input[type=submit]')
    this.submitButton.disabled = true;

    // 在表单上监听input事件，利用事件委托处理所有子输入元素的事件
    this.element.addEventListener('input', (event) => {
      // 只处理输入类元素的事件
      const target = event.target;
      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) {
        this.enableSubmit();
      }
    });
  }

  enableSubmit() {
    this.submitButton.disabled = false;
  }
}

说明 #

• 两种方式都能达到不用重复加data-action的目的
• 事件委托的扩展性更好，适合有动态表单元素的场景
• 缓存submitButton是为了减少DOM查询次数，提升性能

内容的提问来源于stack exchange，提问作者Backo