Blazor实现点击按钮时仅为当前按钮添加Ripple类的问题

你当前代码的核心问题是：所有按钮共享了同一个buttonClass组件级变量，这个全局状态的变化会同步作用到所有绑定它的按钮上，导致点击任意按钮时，所有按钮都会加上ripple类。

要实现每个按钮独立触发波纹效果且具备扩展性，最佳方案是将带波纹效果的按钮封装成独立的Razor组件，每个组件实例维护自己的私有状态，互不干扰。

步骤1：创建独立的波纹按钮组件（RippleButton.razor） #

<button class="@GetCombinedClass()" @onclick="TriggerRipple">
    @ChildContent
</button>

@code {
    // 允许父组件传入自定义样式类
    [Parameter]
    public string? CustomClass { get; set; }

    // 允许父组件自定义按钮内容
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    // 组件私有状态：标记当前是否显示波纹
    private bool _isRippleActive;

    // 拼接最终的按钮样式类
    private string GetCombinedClass()
    {
        var classList = new List<string>();
        if (!string.IsNullOrEmpty(CustomClass))
        {
            classList.Add(CustomClass);
        }
        if (_isRippleActive)
        {
            classList.Add("ripple");
        }
        return string.Join(" ", classList);
    }

    // 触发波纹效果的异步方法
    private async Task TriggerRipple()
    {
        _isRippleActive = true;
        // 等待1秒后移除波纹类（可根据需求调整时长）
        await Task.Delay(1000);
        _isRippleActive = false;
    }
}

步骤2：在父组件中复用该组件 #

<RippleButton CustomClass="primary-btn">Action 1</RippleButton>
<RippleButton CustomClass="primary-btn">Action 2</RippleButton>

方案优势 #

• 每个RippleButton实例都有独立的状态变量，点击单个按钮只会影响自身的样式变化，不会干扰其他按钮。
• 通过参数传递自定义样式和内容，组件可以灵活复用到任意场景，完全满足扩展性要求，无需为每个按钮单独定义变量或事件。
• 使用Task.Delay替代System.Timers.Timer，代码更简洁且适配Blazor异步编程模型，无需手动处理定时器释放和状态更新调用。

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