如何为自定义Blazor标签添加@onclick点击事件

要让你的DataRow组件支持触发父组件的点击事件，按以下步骤修改即可：

1. 在DataRow组件中添加点击事件参数 #

修改DataRow.razor.cs，新增一个EventCallback类型的参数，用于接收父组件传递的点击回调：

public partial class DataRow
{
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    // 遵循Blazor约定命名为OnClick，对应父组件的@onclick绑定
    [Parameter]
    public EventCallback OnClick { get; set; }
}

2. 绑定组件内部元素的点击事件 #

修改DataRow.razor，将内部<div>的点击事件与我们定义的OnClick回调关联：

<div @onclick="OnClick">
    @ChildContent
</div>

3. 父组件正常使用@onclick绑定方法 #

你的父组件代码无需修改，直接通过@onclick绑定方法即可，Blazor会自动将父组件的回调映射到DataRow的OnClick参数：

<DataRow @onclick="MyClickFun"></DataRow>

@code
{
     private void MyClickFun()
     {
       // 这里编写你的点击处理逻辑
     }
}

可选：传递点击事件详情 #

如果需要获取鼠标位置等点击事件参数，可以调整为带参数的版本：

修改DataRow.razor.cs：

[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }

修改DataRow.razor：

<div @onclick="args => OnClick.InvokeAsync(args)">
    @ChildContent
</div>

父组件方法调整：

private void MyClickFun(MouseEventArgs args)
{
   // 可通过args获取点击位置等信息，比如args.ClientX
}

自定义Blazor组件不会自动继承原生HTML元素的事件，必须显式定义对应的EventCallback参数，并在组件内部的DOM元素上绑定事件触发回调，才能实现父组件方法的调用。

内容的提问来源于stack exchange，提问作者riki