Blazor：如何从子组件中的事件中获取发送者

Question

我已经按照文档中的描述制作了一个带有事件的组件

如果我使用该组件的多个实例，有什么方法可以判断是哪个实例触发了事件？
在“常规”.net 中通常有一个sender参数。

请参阅我的BlazorFiddle
... 或在此处查看我的示例代码：

子组件

<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; }
}

指数

@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 ?"
    }
}

我希望能够从 Index 的 ShowMessage 函数中的发送 ChildComponent 获取数据。

Answer 1

不幸的是，您没有发件人，这里已经讨论过这个主题：https : //github.com/aspnet/Blazor/issues/1277。

不。这将涉及创建一些新方法来跟踪 DOM 元素的身份。

如果您能够更高级地描述您尝试实现的功能类型，那么可能有一种更符合 Blazor 风格的方式来简单地实现您想要的功能。

解决方法是将参数（事件和其他）显式传递给您的ShowMessage方法。

@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();
    }
}

老 BlazorFiddler 在这里（Blazor 0.7）：https ://blazorfiddle.com/s/9zh85obk

在此处更新 BlazorFiddler（.NET Core 3.0）：https ://blazorfiddle.com/s/5p45emmo

为了跟踪是否会有任何更新，您可以关注这个问题：https : //github.com/aspnet/AspNetCore/issues/5501