Blazor，如何将事件目标传递给 JavaScript答案

【问题标题】：Blazor, how to pass event target to JavaScriptBlazor，如何将事件目标传递给 JavaScript
【发布时间】：2024-01-07 20:00:01
【问题描述】：

我想问一下：

在 Blazor 中，如何将事件目标（或 this）传递给我的 JavaScript？问题是我正在使用@foreach 创建输入，因此可以有很多输入。

这是它的样子：

@foreach (Item in ItemsList)
        {
          <input 
              @onchange="ChangeColor" 
              value="@Item.Value">
}

我想简单的onchange触发这个功能：

@code 

{
    async Task ChangeColor()
    {
        await JsRuntime.InvokeVoidAsync("changeColor");
    }
}

并最终读取我的 JS 中的值：

function changeColor (el) {


   console.log(el);

}

我尝试使用@ref，但是我想访问触发该函数的输入。由于可能有很多人，我不想使用@ref 对每个人进行硬编码。

【问题讨论】：

console.log(el) 应该显示什么？
@Vencovsky 我希望得到 DOM elemenet
您说“我尝试使用@ref，但是我想访问触发该功能的输入。由于其中可能有很多，我不想使用硬编码它@ref 给他们每个人”，但我认为出了点问题，我只是添加了一个答案，试图解释原因，并使其代码能够正常工作。但是如果你想console.log(el)返回de DOM元素，你需要使用@ref。

标签： javascript blazor blazor-client-side

【解决方案1】：

如cmets中所说

@Vencovsky 我希望得到 DOM elemenet

如果您想在控制台中显示 DOM 元素，您需要将 @ref 传递给 DOM 元素并将该引用传递给 javascript

但是你在你的问题中说

我尝试使用@ref，但是我想访问触发该函数的输入。由于可能有很多人，我不想使用@ref 对每个人进行硬编码。

所以这有点令人困惑，因为你需要使用@ref，但你说你不想使用@ref，所以我认为正在发生的事情是你以错误的方式使用@ref并且你认为你不需要它，但实际上你需要它。

这是你需要的

保存每个元素的所有引用的属性 (ElementReference)
仅将被点击的元素传递给ChangeColor

这里有一个例子说明如何做到这一点

@for(var i = 0; i < ItemsList.Count(); i++)
{
    var ii = i;

    @* Passing only the ref that called @onchange *@
    <input @onchange="(() => ChangeColor(Refs[ii]))" 
           @ref="Refs[ii]"
           value="@ItemsList[ii]">
}

@code 
{
    [Inject]
    IJSRuntime JSRuntime  { get; set; }

    async Task ChangeColor(ElementReference el)
    {
        await JSRuntime.InvokeVoidAsync("changeColor", el);
    }

    // Property that will hold the refs 
    ElementReference[] Refs { get; set; }

    string[] ItemsList { get; set; } = new string[]
        {
            "hey",
            "hope",
            "this",
            "works"
        };
}

【讨论】：