8、前端开发：Stimulus 与 React 的应用与实践

前端开发：Stimulus 与 React 的应用与实践

1. Stimulus 通用控制器

在前端开发中，将数据放入标记可以让我们创建通用、可复用的 Stimulus 控制器。就像 Turbo 能让我们在不编写大量自定义 JavaScript 的情况下添加很多功能一样，编写通用的 Stimulus 控制器也能实现这一点。

目前有一个控制器，它会响应点击事件，显示或隐藏目标元素，并改变目标的文本。我们可以更抽象地思考，这里其实有两个独立的点击响应动作：一个是添加和移除 CSS 类，另一个是改变按钮的文本。我们将把它们拆分成两个独立的控制器，以展示 Stimulus 如何组合小型、通用的动作。

1.1 文本控制器

import { Controller } from "@hotwired/stimulus"
export default class TextController extends Controller {
  static targets = ["elementWithText"]
  elementWithTextTarget: HTMLElement
  static values = {
    status: Boolean,
    on: { type: String, default: "On" },
    off: { type: String, default: "Off" },
  }
  offValue: string
  onValue: string
  statusValue: boolean
  toggle(): void {
    th