双击 Radzen Blazor 树项目答案

【问题标题】：Double Click Radzen Blazor Tree Items双击 Radzen Blazor 树项目
【发布时间】：2020-07-17 15:04:29
【问题描述】：

我在 Blazor 项目中使用 Radzen Blazor Tree 组件。默认情况下，该组件带有一个事件监听器，用于单击RadzenTreeItem。我希望添加功能，例如单击RadzenTreeItem 和双击RadzenTreeItem 会对应用程序产生不同的更改。我正在考虑通过为 dblclick 事件侦听器使用 JSInterop 来实现这一点，但我知道这需要为每个 RadzenTreeItem 提供单独的 html id，我不知道如何为 RadzenTreeItem 创建唯一的 id，因为树具有动态大小。我的问题是如果每个项目都是在 RenderFragment 中创建的，如何为 RadzenTreeItem 创建唯一 ID，或者是否有更好的方法来允许双击功能？

以下是用于显示RadzenTreeItem 的C# RenderFragment 示例：

public static RenderFragment<RadzenTreeItem> TreeDesign = (RadzenTreeItem context) => builder =>
{
    builder.OpenComponent<RadzenIcon>(0);
    builder.AddAttribute(1, "Icon", "crop_16_9");
    builder.CloseComponent();
    builder.AddContent(4, context.Text);
};

以下是调用 RenderFragment 并创建树的 html 代码示例：

<RadzenTree Data="@entries" Change="@OnChange">
    <RadzenTreeLevel Template="@TreeDesign" Text="@GetTextForNode" />
</RadzenTree>

【问题讨论】：

标签： blazor-webassembly

【解决方案1】：

5 个月大 - 但我会告诉你几年前我如何在 Silverlight 中处理双击...。我创建了一个 Observable，当在 250 毫秒内有两次点击时会给我一个事件。 ..这被称为Hot Observable，其中事件简单地流过，当一个条件与事件匹配时，它可以引发另一个事件......我可以尝试挖掘代码，作为研究双击事件和保护 Blazor 事件。

为了更清楚一点 - 这将监听您引用的点击事件，如果有两次点击，它将调用方法 A，否则将调用 B 进行一次点击...

然后三次单击将变为 1 次双击和一次单击 - 但这取决于使用 Observable 的第一个和第三个事件之间的时间...

【讨论】：

哦，当我试图决定是否进入 Blazor 时，对 Silverlight 的引用并没有增加信心......

【解决方案2】：

也许将来会对某人有所帮助：

    builder =>
    {
            builder.OpenComponent<RadzenIcon>(0);
            builder.AddAttribute(1, "Icon", "crop_16_9");
            builder.CloseComponent();
            builder.OpenElement(2, "div");
            builder.AddAttribute<MouseEventArgs>(3, "ondblclick", RuntimeHelpers.TypeCheck<EventCallback<MouseEventArgs>>(EventCallback.Factory.Create<MouseEventArgs>(this,
     (args) => OnDoubleClick(args, context)
  )));           
            builder.AddContent(10, context.Text);
            builder.CloseElement();
        };
    };

private void OnDoubleClick(MouseEventArgs args, RadzenTreeItem item)
{
    //
}

【讨论】：