Rails应用Stimulus控制器中如何正确获取目标元素？

你核心问题是没搞懂Stimulus中TargetSet对象的正确用法，外加代码里的变量引用错误。以下是修正方案和关键说明：

错误点拆解 #

1. TargetSet遍历方式冗余：this.targets是Stimulus封装的TargetSet对象，自带forEach方法，不需要用Array.prototype.forEach.call转换调用。
2. 变量引用错误：循环里写的this.targElement是错误的，targElement是循环参数，直接调用即可，加this会导致找不到变量，触发undefined报错。
3. 误解this.constructor.targets作用：它仅返回目标名称的字符串数组（比如['home','groups']），不是DOM元素集合，根本没法设置样式。

修正后的代码 #

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ['home', 'groups', 'events', 'games'];

  connect(){
    console.log("Tab Controller Connected");
  }

  tabSelect(event){
    // 遍历所有target元素，重置边框颜色
    this.targets.forEach(targElement => {
      targElement.style.borderBottomColor = "var(--mainDark)"
    });
    // 给点击的元素设置高亮颜色
    event.currentTarget.style.borderBottomColor = "var(--highlight)"
  }
}

额外优化建议 #

• 用event.currentTarget代替event.target：如果标签页内部有嵌套元素，event.target可能指向内部子元素，而currentTarget始终绑定到绑定了tabSelect方法的元素，更可靠。
• 推荐用CSS类控制样式，比直接操作style更符合关注点分离：

  .tab {
    border-bottom-color: var(--mainDark);
  }
  .tab.active {
    border-bottom-color: var(--highlight);
  }
  

  控制器代码可改为：

  tabSelect(event){
    this.targets.forEach(targElement => {
      targElement.classList.remove('active')
    });
    event.currentTarget.classList.add('active')
  }
  

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