Blazor 循环、闭包和绑定答案

【问题标题】：Blazor Looping, Closures and BindingBlazor 循环、闭包和绑定
【发布时间】：2022-08-17 02:39:06
【问题描述】：

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

这是 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;
}

虽然 BlazorFiddle 很好，但您应该在问题本身中包含代码的相关部分。
是的。我应该。谢谢。

标签： c# closures blazor

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

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

修复：


@{ int allStuffCounter = 0; 

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


@code
{                  
  //int allStuffCounter = 0;
}

【讨论】：

谢谢你。我是 Blazor 的新手，重新渲染让我大吃一惊。