Blazor “@ref” 指的是循环命令中的最后一个元素

Question

“@ref”指的是当前正确的元素。

“@ref”指的是循环命令中最后一个不正确的元素（在我的示例中，是 table 元素的最后一个 tr 元素）。

我希望“@ref”单独引用每个元素（在我的示例中，table 元素的每个 tr 元素）而不是最后一个元素。

@inject IJSRuntime JsRuntime;

<table class="table">
    <tbody>
        @foreach (var item in Items)
        {
            <tr @ref="@row" @onclick="() => {Rowclick(row);}">
                <td>@item</td>
            </tr>
        }
    </tbody>
</table>

@code
{
    public string[] Items = new string[] { "Tomas", "Jack", "Michael" };

    public async void Rowclick(ElementReference row)
    {
        await JsRuntime.InvokeAsync<object>("updateBackgroundColor", row);
    }
}

//--------------------------

<script type="text/javascript">
    function updateBackgroundColor(row) {
        row.bgColor = 'red';
    }
</script>

Answer 1

尝试这样的事情。 js部分没试过

@for (int i = 0; i < Items.Length; i++)
{
    <p @ref="Refs[i]">@Items[i]</p>
}

@code {
    public string[] Items = new string[] { "Tomas", "Jack", "Michael" };
    ElementReference[] Refs = new ElementReference[4];
}

Answer 2

这是你的答案：

    @using Microsoft.AspNetCore.Components;
    @inject IJSRuntime JsRuntime;

    <table class="table">
    <tbody>
        @foreach (var item in Items)
        {
            <tr @ref:suppressField @ref="@item.Row" @onclick="@(() => {ClickForTestRow(item.Row);})">
                <td>@item.Name</td>
            </tr>
        }
    </tbody>
    </table>


@code {
[Parameter]
public IList<MyModel> Items { get; set; }

public async void ClickForTestRow(ElementReference row)
{
    await JsRuntime.InvokeAsync<object>("updateBackgroundColor", row, "red");
}

public class MyModel
{
    public ElementReference Row { get; set; }

    public string Name { get; set; }
}
}

//----------------

<script type="text/javascript">
    function updateBackgroundColor(row) {
        row.bgColor = 'red';
    }
</script>

Blazor “@ref” 指的是循环命令中的最后一个元素

Blazor “@ref” refers to the last element in loop command

c#

.net-core

blazor

blazor-server-side

blazor-client-side