Blazor 循环、闭包和绑定

Question

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

这是 Blazor 小提琴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

问题是 allStuffCounter 的allStuffCounter 。 任何更改（oninput）都会触发重新渲染，但从 allStuffCounter 的旧值开始。

修复：

@{ int allStuffCounter = 0; 

  for (var i = 0; i < levels; i++)
  {    
    int copy = allStuffCounter;
    ...      
    if(allStuffCounter < stuffCounterLimit) allStuffCounter++;
    
  }
}


@code
{                  
  //int allStuffCounter = 0;
}

Answer 2

复制并测试...

@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;
    }
}