9

我正在使用Grid.Blazor库在 Blazor 应用程序上呈现服务器端网格。其中一列有一个带有点击事件的按钮。因此，当单击按钮时，也会触发网格行事件以及按钮单击事件。我想停止事件传播，只让按钮单击事件触发。

网格：

  <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。非常感谢任何帮助。

4

3 回答 3

6

如果它有帮助，并添加到 @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。

于 2020-11-07T03:41:00.423 回答
4

我在使用扩展器时遇到了类似的问题。我希望能够在不展开行的情况下单击展开器行内的按钮。我能够通过使用@onmousedown来完成我的 C# 代码和onclick的窗口事件调用

 <a class="text-primary" @onmousedown="() => MyModal.Open()" onclick="event.stopPropagation()"> Button </a>
于 2020-11-03T22:55:07.663 回答
0

我在使用表时遇到了完全相同的问题。似乎现在 MatBlazor 按钮有办法停止传播：OnClickStopPropagation="true"

以下代码适用于我，使用MatIconButtonand MatButton：

<MatBlazor.MatButton Icon="@MatIconNames.Remove_red_eye" OnClick="@ShowData" OnClickStopPropagation="true"></MatBlazor.MatButton>
于 2020-09-25T22:00:18.730 回答