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我希望获得DOM元素

如果要在控制台中显示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"
        };
}

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

1 个答案: