如何在 Blazor 服务器应用程序中停止事件传播

2023-12-23

我在用着网格.Blazor https://github.com/gustavnavar/Grid.Blazor/blob/master/docs/blazor_server/Render_button_checkbox_etc_in_a_grid_cell.md用于在 Blazor 应用程序上渲染服务器端网格的库。其中一列有一个带有单击事件的按钮。因此,当单击按钮时,网格行事件也会与按钮单击事件一起触发。我想停止事件传播并只让按钮单击事件触发。

Grid:

  <GridComponent @ref="_gridComponent" T="QuickLists" Grid="@_grid"  OnRowClicked="@(async (item) => await ExerciseDetails(item))"></GridComponent>


Action<IGridColumnCollection<QuickExcerciseLists>> columns = c =>
        {
            c.Add().Titled("Actions").RenderComponentAs(typeof(ChildComponent)).SetWidth("5%");
            c.Add(o => o.Name, comparer).Titled("Name").SetWidth("10%");
            c.Add(o => o.Age, comparer).Titled("Age").SetWidth("15%");
            c.Add(o => o.Address, comparer).Titled("Address").RenderComponentAs<MatTooltip>().SetWidth("15%");
        };

自定义列组件:

<MatBlazor.MatButton Icon="@MatIconNames.Remove_red_eye" @onclick="@ShowData" @onclick:stopPropagation="true"></MatBlazor.MatButton>

我尝试通过@onclick:stopPropagation在子按钮组件中。但下面给出了编译错误。

为此,组件参数“onclick”使用两次或多次 成分。参数必须是唯一的(不区分大小写)。组件 参数“onclick”由“@onclick:stopPropagation”生成 指令属性。

我正在运行.Net core 3.1.201。非常感谢任何帮助。


如果它有帮助,并添加到 @Ivan 为 MatBlazor MatButton/MatIconButton 所做的评论,这似乎对我不起作用,我使用了以下解决方法:

<div @onclick:stopPropagation="true" @onclick:preventDefault="true">
  <MatButton OnClick="@DoSomething" @ref="MyButton">Do it!</MatButton>
</div>

我需要同时使用 stopPropagation 和 PreventDefault。我必须使用 div 包装器,因为 MatButton 不允许我添加多个 onclick。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Blazor 服务器应用程序中停止事件传播 的相关文章

随机推荐