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

Question

我想问：

在 Blazor 中，如何将事件目标（或这个）传递给我的 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 对它们中的每一个进行硬编码。

Answer 1

如评论所述

@Vencovsky I hoped to get DOM elemenet

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

但是你在问题中说

I tried using @ref, however I'd like to get access to the input that triggers the function. Since there may by many of them, I don't want to hardcode it using @ref to each of them.

所以这有点令人困惑，因为你需要使用 @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"
        };
}

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

Blazor, how to pass event target to JavaScript

javascript

blazor

blazor-client-side