本文介绍如何为 Blazor 自定义组件（如 ）正确暴露并响应 @onclick 类似行为，通过 EventCallback 实现父子组件间点击事件传递，避免直接使用 @onclick 属性绑定失败的问题。

本文介绍如何为 blazor 自定义组件（如 ``）正确暴露并响应 `@onclick` 类似行为，通过 `eventcallback` 实现父子组件间点击事件传递，避免直接使用 `@onclick` 属性绑定失败的问题。

在 Blazor 中，自定义组件（如 DataRow.razor）不能直接接收 @onclick 指令属性——因为 @onclick 是框架为内置 HTML 元素（如

、）预定义的特殊指令，不会自动转发到自定义组件上。若在父组件中写作 ，编译器会报错：“The component DataRow does not support the 'onclick' attribute”。

✅ 正确做法是：在自定义组件中显式声明一个 EventCallback 参数（推荐命名为 OnClick），并在内部

上绑定原生 @onclick，再触发该回调：

<!-- DataRow.razor -->
<div>
    @ChildContent
</div>

<!-- DataRow.razor.cs -->
public partial class DataRow
{
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

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

    private async Task HandleClick(MouseEventArgs e)
    {
        await OnClick.InvokeAsync(e);
    }
}</mouseeventargs>

? 注意：建议将 EventCallback 类型设为 EventCallback（而非无参 EventCallback），以便父组件能接收完整的鼠标事件信息（如 e.ClientX, e.Button 等）。若无需事件参数，可简化为 EventCallback，调用时仍保持 await OnClick.InvokeAsync()。

在父组件中使用时，通过属性名 OnClick 绑定（非 @onclick）：

<!-- Parent.razor -->
<datarow onclick="MyClickFun"><p>User ID: 123</p>
    <span>Status: Active</span>
</datarow>

@code {
    private void MyClickFun(MouseEventArgs e)
    {
        Console.WriteLine($"Clicked at ({e.ClientX}, {e.ClientY})");
        // 执行业务逻辑
    }
}

? 小贴士：

• 若需支持其他事件（如 @ondblclick、@oncontextmenu），可按相同模式扩展 OnDoubleClick、OnContextMenu 等参数；
• 建议为 EventCallback 参数提供默认空实现（如 = EventCallback.Empty），提升组件健壮性；
• 避免在 HandleClick 中直接写业务逻辑——所有交互逻辑应交由父组件控制，确保关注点分离。

通过这一模式，DataRow 既保持了封装性，又具备与原生元素一致的事件使用体验，是 Blazor 组件化开发中的标准实践。