Blazor循环、闭包和绑定

Question

我将其分解成一个简单的例子，即循环通过某些内容，但将其分解成关卡。我在内部循环中实例化了一个本地副本，但这似乎不起作用。当您尝试更改输入中的值时，它会将它们全部更改为计数器变量。

下面是Blazor Fiddle中的代码https://blazorfiddle.com/s/d02wswws

@for (var i = 0; i < levels; i++)
{
<div>Level @i</div>
@for (var j = 0; j < stuffPerLevel; j++)            
{
int copy = allStuffCounter;
<input type="text" @bind="stuff[copy]" @bind:event="oninput" />
<div>@stuff[copy]</div>
if(allStuffCounter < stuffCounterLimit) allStuffCounter++;
}
}
@code
{
string[] stuff = {"some stuff 1", ... ,"some stuff 20"};

int allStuffCounter = 0;
int levels = 3;
int stuffPerLevel = 4;
int stuffCounterLimit = 11;
}

Answer 1

复制并测试…

@for (var i = 0; i < levels; i++)
{
<div>Level @i</div>
@for (var j = 0; j < stuffPerLevel; j++)
{
int copy = allStuffCounter;
<input @bind="stuff[copy]" @bind:event="oninput" type="text" />
<div>@stuff[copy]</div>
allStuffCounter++;
}
}
@code
{
string[] stuff = { "some stuff 1", "some stuff 2", "some stuff 3", "some stuff 4",
"some stuff 5", "some stuff 6","some stuff 7","some stuff 8","some stuff 9",
"some stuff 10","some stuff 11","some stuff 12","some stuff 13","some stuff 14",
"some stuff 15","some stuff 16","some stuff 17","some stuff 18","some stuff 19", "some stuff 20" };

int allStuffCounter = 0;
int levels = 3;
int stuffPerLevel = 4;
// Superfluous...
// int stuffCounterLimit = 11;
protected override void OnAfterRender(bool firstRender)
{
allStuffCounter=0;
}
}