add类，当按钮在Blazor

Question

@code {
    // Set Ripple Class
    private string buttonClass = "";
    private void AddRipple()
    {
        buttonClass = "ripple";
        StartTimer();
    }
    private void StartTimer()
    {
        var timer = new Timer(1000);
        timer.Elapsed += RemoveClass;
        timer.AutoReset = false;
        timer.Start();
    }
    private void RemoveClass(object source, ElapsedEventArgs e)
    {
        buttonClass = "";
        ((Timer)source).Dispose();
        InvokeAsync(StateHasChanged);
    }
}

我已经创建并测试了此功能，但是当单击任何一个按钮时，它将类更改应用于页面上的每个按钮。如何使事件开火并仅在单击实际按钮上应用类更改？

从我的理解中，您需要一个列表来控制使用独立计时器的每个按钮类的状态。

@page "/"
<style>
    .ripple{
    color:red;
    }
</style>

@using System.Timers
<button  class="primary-btn @buttonClass[1]" @onclick="()=>AddRipple(1)">Action 1</button>
<button  class="primary-btn @buttonClass[2]" @onclick="()=>AddRipple(2)">Action 2</button>

@code {
    //create list of 3 items to match index 1 and 2.
    private List<string> buttonClass = new List<string>(new string[3]);

    private void AddRipple(int i)
    {
        buttonClass[i] = "ripple";
        StartTimer(i);
    }
    private void StartTimer(int i)
    {
        var timer = new Timer(1000);
        timer.Elapsed += (sender,e)=> RemoveClass(sender,e,i);
        timer.AutoReset = false;
        timer.Start();
    }
    private void RemoveClass(object source, ElapsedEventArgs e,int i)
    {
        buttonClass[i] = "";
        ((Timer)source).Dispose();
        InvokeAsync(StateHasChanged);
    }
}

Answer 1