blazor - Wraping button inside custom component and propagating onclick event

Question

I would like to wrap input(type button) inside custom component so that I could apply isolated css and some speciel parameters to control. But how do I propagate onclick and other events from input to my component?

Whhen you use input button you can use onclick event and its settings like this:

<input type="button" @onclick:preventDefault="true" @onclick:stopPropagation="true" @onclick="@someMethod" />

How do I achieve the same with my component? So I can have:

<customBUtton @onclick:preventDefault="true" @onclick:stopPropagation="true" @onclick="@someMethod" />

thanks for any help

Answer 1

You could use a EventCallback or EventCallback<T>. These are better suited compared to Action or Func as the callback could have to call StateHasChanged in order to render changes. Using EventCallback or EventCallback<T> this call is done by the framework automatically.

Say you have some child component:

<button @onclick="@(() => OnClick.InvokeAsync("eventcallback invoked"))">Click me</button>

@code {
    [Parameter] public EventCallback<string> OnClick { get; set; }
}

Then a parent component

<ChildComponent OnClick="Handler"></ChildComponent>
@code {
    void Handler(string message) 
    {
        ...
    }
}