如何使用字符串.@ref的格式

Question

我的实际代码中有许多下拉项。下面显示了一个示例。我正在重写代码以减少行数，这样更容易阅读和维护。

@if (ItemTest.Contains("One"))
{
<li class="dropdown-item">
<button @ref="_btn1" class="item" id="0" @onclick=Open1>One</button>
</li>
<li class="dropdown-item">
<button @ref="_btn2" class="item" id="1" @onclick=Open2>Two</button>
</li>
} 

@if (ItemTest.Contains("Two"))
{
<li class="dropdown-item">
<button @ref="_btn3" class="item" id="3" @onclick=Open3>Three</button>
</li>

}

Answer 1

您可以将引用存储在列表中，并通过以下方式使用它们：

@inject IJSRuntime JSRuntime
@for(int i=0; i < btnReferences.Count; i++)
{
var iCopy = i;
<button @ref="btnReferences[iCopy]" @onclick="(async () => await TestRef(iCopy))"></button>
}
@code{
private List<ElementReference> btnReferences = new List<ElementReference>();
protected override async Task OnInitializedAsync()
{
for(int i = 0; i < 5; i++)
{
btnReferences.Add(new ElementReference());
}
}
public async Task TestRef(int i)
{
await JSRuntime.InvokeVoidAsync("console.log", testref[i].Id);
}
}

正如Brian已经说过的，@ref需要ElementReference(或组件类型)：string不是有效的类型。@onclick也遇到了同样的问题。