本文介绍如何为 Blazor 自定义组件（如 <DataRow>）正确暴露并响应 @onclick 类似行为，通过 EventCallback 实现父子组件间点击事件传递，避免直接使用 @onclick 属性绑定失败的问题。
本文介绍如何为 blazor 自定义组件（如 `
在 Blazor 中，自定义组件（如 DataRow.razor）不能直接接收 @onclick 指令属性——因为 @onclick 是框架为内置 HTML 元素（如 <div>、<button>）预定义的特殊指令，不会自动转发到自定义组件上。若在父组件中写作 <DataRow @onclick="MyClickFun" />，编译器会报错：“The component DataRow does not support the 'onclick' attribute”。
✅ 正确做法是：在自定义组件中显式声明一个 EventCallback 参数（推荐命名为 OnClick），并在内部 <div> 上绑定原生 @onclick，再触发该回调：
<!-- DataRow.razor -->
<div @onclick="HandleClick">
@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);
}
}? 注意：建议将 EventCallback 类型设为 EventCallback<MouseEventArgs>（而非无参 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 组件化开发中的标准实践。
