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

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

在前端开发中，Stimulus和React是两个非常实用的工具，它们能帮助开发者高效地实现各种交互功能。下面将详细介绍它们的相关内容。

Stimulus通用控制器

Stimulus允许我们创建通用、可复用的控制器，从而在不编写大量自定义JavaScript的情况下添加很多功能。以当前的一个控制器为例，它能响应点击事件，显示或隐藏目标元素，并改变目标文本。我们可以将其拆分为两个独立的控制器：一个用于添加和移除CSS类，另一个用于改变按钮文本。

以下是文本控制器的代码：

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 {
        this.flipState()