如何将元素作为参数传递给函数答案

【问题标题】：How to pass element as parameter to function如何将元素作为参数传递给函数
【发布时间】：2021-09-03 07:25:20
【问题描述】：

有没有办法将元素作为参数传递给 onclick（或任何其他）函数，without 定义 ref 变量？

你会在 Angular 中做的事情，例如 <button #myBtn (click)='foo(myBtn)'>

我知道如何在 Blazor 中实现这一点的当前方式有点冗长。

<button @ref=MyButton @onclick='(()=>foo(MyButton))'>

@code{
 ElementReference MyButton;
}

如果可能的话，我想去掉 @code 部分。

【问题讨论】：

要给出一个聪明的答案，foo 做什么需要参考？
JsInterop 的东西，需要元素来获取它的大小、位置等。
这带来了同样的问题。您仍然必须在代码中声明该 ID 属性。这也是我现在也在使用的，但我认为这不是最佳选择，尤其是当您需要在多个元素上执行此操作时。

标签： blazor blazor-server-side blazor-webassembly

【解决方案1】：

如果你需要做一些 JsInterop 的东西，那么你就不需要@ref。

<button id="mybutton" @onclick='(()=>Foo("mybutton"))'>

关于你的 Foo 方法：

        async Task Foo(string id)
        {
        //...do something before
        await JsRuntime.InvokeVoidAsync("doSomething ", id);
        //...do something after js function invoked
        }

在你的 Js 上：

doSomething = (id) => {
    var element = document.getElementById(id);
    // do something...
}

【讨论】：

为了简单起见，我想要 ref，只要它的工作方式与 Angular 中的相同。必须处理应用程序中的数百个元素，我将使用 guid 来实现 Id 的唯一性，并且我仍然必须将 ID 声明为属性。您的解决方案确实是正确的，但它不能解决我正在寻找的东西。直接引用元素，或者能够传递 ID（但作为 guid，而不是强制声明的），而无需在代码中声明额外的属性来保存该值。

【解决方案2】：

您可以像这样传递引用，但它应该被填充或尝试传递级联参数。它可以在父子之间访问。

您可以创建 .cs 文件并从 ComponentBase 继承它，也可以在组件页面上继承该基础。

示例 ComponentClass：公共类 TextBoxComponentBase：ComponentBase

示例组件：@inherits TextBoxComponentBase
您将像这样摆脱@code部分。

【讨论】：

这只是一个小例子。想象一下，我在这个组件中有 10 个元素需要被引用。