So I have a child button component that uses onclick event to add a class and then remove the class after a short bit of time (for a button ripple effect). The issue I am facing now is adding another event to the parent when the button is clicked (such as opening a modal window).
Child component (PrimaryButton.razor):
@using System.Timers<button type="button" class="@ButtonClass @RippleClass" @onclick="AddRipple">@ButtonText</button>@code { [Parameter] public string ButtonClass { get; set; } [Parameter] public string ButtonText { get; set; } [Parameter] public EventCallback OnClick { get; set; } private async Task HandleClick() { await OnClick.InvokeAsync(null); } // Set Ripple Class private string RippleClass = ""; private void AddRipple() { RippleClass = "ripple"; StartTimer(); } private void StartTimer() { var timer = new Timer(500); timer.Elapsed += RemoveClass; timer.AutoReset = false; timer.Start(); } private void RemoveClass(object source, ElapsedEventArgs e) { RippleClass = ""; ((Timer)source).Dispose(); InvokeAsync(StateHasChanged); }}Parent (Index.razor):
<PrimaryButton ButtonClass="btn-primary1" ButtonText="Search" OnClick="@OpenModal" /><SfDialog IsModal="true" @bind-Visible="Visibility"><DialogTemplates><Header>Search Results</Header><Content><p>Showing 0 of 0 search results.</p></Content><FooterTemplate><PrimaryButton ButtonClass="btn-primary2" ButtonText="Okay" OnClick="@CloseModal" /></FooterTemplate></DialogTemplates><DialogEvents OnOverlayModalClick="@OverlayClick"></DialogEvents><DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings></SfDialog>@code { // Modal private bool Visibility { get; set; } = false; private void OpenModal() { this.Visibility = true; } private void CloseModal() { this.Visibility = false; } private void OverlayClick(OverlayModalClickEventArgs args) { this.Visibility = false; }}I tried using EventCallBack but don't think I am using it correctly. I need more explanation other than what I read here (if that is the way to go):