MudBlazor中自定义组件Div点击事件未触发的问题求助

问题场景 #

我开发了一个名为Selectable的Blazor组件，代码如下：

Selectable.razor

@inherits ComponentBase
<div class="@getClass()" @onclick="() => SetSelected()"></div>

Selectable.razor.cs

using Microsoft.AspNetCore.Components;

namespace TestBlazor.Components.Pages
{
    public partial class Selectable : ComponentBase
    {
        public bool selected = false;
        public static Selectable? alreadySelected = null;
        private string getClass()
        {
            return selected ? "selectable selected" : "selectable";
        }

        protected void SetSelected()
        {
            if (alreadySelected != null)
                alreadySelected.selected = false;

            selected = true;
            alreadySelected = this;
            StateHasChanged();
        }
    }
}

遇到的问题：点击组件中的Div时，SetSelected方法未被触发，但getClass方法可正常执行（已通过断点验证）。

原因分析 #

1. 空Div无有效点击区域
   你的<div>标签是空的，既没有内容也未设置宽高样式，浏览器会将其渲染为宽高为0的元素——没有可交互的物理区域供用户点击，自然触发不了点击事件。而getClass能正常执行是因为组件初始化时会调用该方法计算CSS类，和元素是否可点击无关。

2. 额外潜在问题（后续可能影响功能）
   使用静态字段alreadySelected管理选中状态存在风险：组件销毁后静态引用未清理会导致内存泄漏；且修改其他组件的selected字段后，未调用该组件的StateHasChanged()，会导致旧选中项的UI无法及时更新。

解决方案 #

1. 给Div添加可点击区域 #

两种可选方式：

• 设置CSS样式定义尺寸：在全局或组件样式中给.selectable类添加宽高：

  .selectable {
      width: 120px;
      height: 60px;
      border: 1px solid #eee; /* 可选，方便直观看到点击区域 */
      cursor: pointer; /* 可选，提示可点击 */
  }
  

• 添加占位内容：给div填充文本或占位元素：

  <div class="@getClass()" @onclick="() => SetSelected()">点击选择</div>
  

2. 修正选中状态管理逻辑 #

替换静态字段的方式，改用组件间通信（通过父组件维护选中状态，子组件通过EventCallback通知选中事件），避免静态引用带来的问题：

• 修改子组件：

  [Parameter]
  public bool IsSelected { get; set; }
  
  [Parameter]
  public EventCallback<bool> IsSelectedChanged { get; set; }
  
  protected async Task SetSelected()
  {
      await IsSelectedChanged.InvokeAsync(true);
  }
  

• 父组件维护选中状态：

  @foreach (var item in selectableItems)
  {
      <Selectable 
          IsSelected="@(selectedItemId == item.Id)" 
          IsSelectedChanged="@(() => selectedItemId = item.Id)" />
  }
  
  @code {
      private int? selectedItemId;
      private List<SelectableItem> selectableItems = new(); // 示例数据集合
  }
  

内容的提问来源于stack exchange，提问作者Anders Lindén