如何检测 MudBlazor 中表格行的双击？

Posted 2023-03-27

【中文标题】如何检测 MudBlazor 中表格行的双击？

【英文标题】：How to detect a double click on a table row in MudBlazor?

【发布时间】：2021-09-23 17:13:48

【问题描述】：

我正在使用 MudBlazor，我想检测对单个表格行的双击并对事件做出反应。但是，API of the table. 中没有列出双击。使用OnRowClick 回调很容易实现单击（另见here on SO）。双击没有等效项。

我尝试将 Blazor 事件 ondblclick 与

<MudTd @ondblclick="OnOrderDbClicked">
    // ...
<MudTd/>

我有两个问题：

我可以捕捉到双击。但我无法让它知道被点击的行（我有一个解决方法）。 我还必须添加到每个单元格，因为 <RowTemplate/> 元素不会接受它。

我只有问题1的拐杖：将变量MyOrderVM MyItem绑定到表的SelectedItem项参数并在双击调用的方法中访问对象（因为a double click also causes two single clicks选择了项目）。

我没有做很多测试，但似乎这可以工作，但没有更好的解决方案吗？还是我太担心副作用？

【参考方案1】：

正如您所说，目前没有像 OnRowClick 这样的开箱即用方式进行双击。但是，请随时创建issue in the repo。

作为一种解决方法，您可以使用您的方法 1 稍作修改，以停止将点击事件传播到 MudTable。我觉得这种方式比绕道SelectedItem更容易理解

<MudTd>
  // the click is handled by the div and not bubbling up to the MudTd
  <div @onclick="@EmptyCallback" @onclick:stopPropagation="true" 
              @ondblclick="@( (x) => DoSomething(context))" >
     // ...
  </div>
<MudTd/>

这里有一个MudBlazor Playground 来展示它。

免责声明：

我是 MudBlazor 的贡献者