Blazor: How to get sender from event in child component

Question

I have made a component with an event as described in the docs

If I use multiple instances of the component, is there any way I can tell which instance it was that fired the event?
In "regular" .net there usually is a sender parameter.

See my BlazorFiddle
... or look at my sample code here:

ChildComponent

<div class="panel panel-default">
    <div class="panel-heading">@Title</div>
    <div class="panel-body">@ChildContent</div>

    <button class="btn btn-primary" @onclick="OnClick">
        Trigger a Parent component method
    </button>
</div>

@code {
    [Parameter]
    private string Title { get; set; }

    [Parameter]
    private RenderFragment ChildContent { get; set; }

    [Parameter]
    private EventCallback<UIMouseEventArgs> OnClick { get; set; }
}

Index

@page "/"

<ChildComponent Title="Panel Title from Parent"
                OnClick="@ShowMessage">Hello child 1</ChildComponent>

<br>
<br>

<ChildComponent Title="Panel Title from Parent"
                OnClick="@ShowMessage">Hello child 2</ChildComponent>

<br>
<br>
<p><b>@messageText</b></p>

@code {
    private string messageText;

    private void ShowMessage(UIMouseEventArgs e)
    {
        // How do I get which ChildComponent was the sender?
        messageText = DateTime.Now.ToString() + ": Message from child ?"
    }
}

I want to be able to get data from the sending ChildComponent in the ShowMessage-function in Index.

Answer 1

Unfortunately you don't have a sender and this topic was already discussed here: https://github.com/aspnet/Blazor/issues/1277.

No. That would involve creating some new way to track the identity of a DOM element.

If you were able to describe at a more high level what sort of functionality you're trying to implement, it might be there's a more idiomatically Blazor-ish way to achieve what you want simply.

The workaround for it is to explicitly pass parameters (event & others) to your ShowMessage method.

@page "/"

<ChildComponent Title="Panel Title from Parent"
                OnClick="@((ev) => ShowMessage(ev, 1))">Hello child 1</ChildComponent>

<br>
<br>

<ChildComponent Title="Panel Title from Parent"
                OnClick="@((ev) => ShowMessage(ev, 2))">Hello child 2</ChildComponent>

<br>
<br>
<p><b>@messageText</b></p>

@code {
    private string messageText;

    // ex: Blazor 0.7 (Old)
    private void ShowMessage(UIMouseEventArgs e, int childId)
    {
        // How do I get which ChildComponent was the sender?
        messageText = DateTime.Now.ToString() + ": Message from child " + childId.ToString();
    }

    // ex: .NET Core 3.0 (Updated)
    // UIMouseEventsArgs were removed
    // Replace Microsoft.AspNetCore.Components.UIEventArgs with System.EventArgs and remove the “UI” prefix from all EventArgs derived types (UIChangeEventArgs -> ChangeEventArgs, etc.).
    // https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-9/
    private void ShowMessage(MouseEventArgs e, int childId)
    {
        // How do I get which ChildComponent was the sender?
        messageText = DateTime.Now.ToString() + ": Message from child " + childId.ToString();
    }
}

Old BlazorFiddler here (Blazor 0.7): https://blazorfiddle.com/s/9zh85obk

Updated BlazorFiddler here (.NET Core 3.0): https://blazorfiddle.com/s/5p45emmo

In order to track if there will be any updates on this, you can follow this issue: https://github.com/aspnet/AspNetCore/issues/5501