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

Question

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

就像在Angular中所做的那样，例如<button #myBtn (click)='foo(myBtn)'>

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

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

@code{
 ElementReference MyButton;
}

如果可能的话，我想要摆脱@code这部分。

- Bogdan B

---

为了给出一个明智的答案，foo需要引用做什么？ - MrC aka Shaun Curtis

需要 JsInterop 相关内容，以获取元素的大小、位置等。 - Bogdan B

@The Backer提供了本来是我的答案，但我现在使用Guids作为id的唯一标识。 - MrC aka Shaun Curtis

这带来了同样的问题。你仍然需要在代码中声明那个ID属性。目前我也是这样做的，但我认为这不是最优解，特别是当你需要在多个元素上执行此操作时。 - Bogdan B

Answer 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...
}

- The Backer

---

出于简单起见，我想要引用，只要它的工作方式与Angular相同。在应用程序中处理数百个元素时，我会使用GUID来确保ID的唯一性，并且仍然需要将ID声明为属性。您的解决方案确实是正确的，但它并没有解决我正在寻找的问题。直接引用元素，或者能够传递ID（但作为GUID，而不是命令式声明的值）而无需在代码中声明额外的属性来保存该值。 - Bogdan B

Answer 2

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

你可以创建一个 .cs 文件，并从 ComponentBase 继承它，在组件页面上也应该继承该基类。

示例 ComponentClass: public class TextBoxComponentBase: ComponentBase

示例 Component: @inherits TextBoxComponentBase
你将摆脱 @code 部分，就像这样。

- Cem Erim

---

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