如何在我的 Stimulus JS 控制器中声明一个 const 字符串？

Question

我希望您能为我的控制器设置一个const变量作为CSS选择器，而不是在整个控制器中硬编码。我将声明放在了控制器的initialize()方法中，但是我得到了一个变量未声明的错误。正确的做法是什么？

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["form"]

  initialize() {
    const seasonInputSelector = "input[id$='_season']"
  }

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll(seasonInputSelector)
    // ...
  }

}

错误： ReferenceError: seasonInputSelector未定义

- daveomcd

---

你正在将 seasonInputSelector 声明为 initialize 方法内的 局部变量。它在 initialize 之外不存在。你需要将其移动为静态类级别字段（由于你的类是匿名的，所以无法这样做）或模块范围内的常量。 - Dai

Answer 1

在模块的根作用域中使用一个 const 变量：

import { Controller } from "stimulus"

const seasonInputSelector = "input[id$='_season']";

export default class extends Controller {
  static targets = ["form"]

  initialize() {
  }

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll( seasonInputSelector );
    // ...
  }

}

- Dai

Answer 2

另一种方法是将其限定在您的类内部。

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["form"]
  seasonInputSelector = "input[id$='_season']";

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll( this.seasonInputSelector );
    // ...
  }
}

- Adrien

---

JavaScript/TypeScript并不允许在类中使用static字段，因此这会将seasonInputSelector作为JavaScript原型/实例属性添加，以便在每个实例中都可以使用- 在这种情况下，您可能没问题，但是如果您将创建许多此类实例，则应该在class定义之后立即声明为类级别：请参见@zagoa在此处的答案：https://dev59.com/WVYN5IYBdhLWcg3wEEnU#48012789 - Dai

基本上，在 class Controller 的闭合大括号 } 后面的一行，加入 Controller.seasonInputSelector = "input[id$='_season']"; 并将 this.seasonInputSelector 改为 Controller.seasonInputSelector。 - Dai