DOM 树更新的奇怪行为（客户端 blazor、razor、C# .net ASP.net 托管）

Question

你好，

我刚刚对 blazor 的 DOM 树更新有了一个奇怪的体验。

代码很简单：

1) 用户可以使用单选按钮在 2 种类型 A 或 B 之间进行选择。

2) when A or B is chosen, more options appear as checkboxes (A lets you select A1 and/or A2, B lets you select B1 and/or B2).

大问题是：如果您执行以下操作，会发生什么：

3) select A（=> 出现两个复选框 A1 和 A2）

4) 检查 A1

5) select B（=> A1 和 A2 消失，复选框 B1 和 B2 出现）

6) 查看B1的状态

我制作了两个不同的版本：

7) 一，我分别定义了 A 和 B 的复选框 -> 这按预期工作（=B1 和 B2 未选中）

8) 一，我直接定义它们，但使用正确的名称 -> 这不起作用！ B1 已选中！

据我了解，当 selecting B（第 5 步）时，blazor 会更新 DOM 树。但我不明白为什么浏览器会记住复选框 B1 已选中，只是因为我选中了 A1，即使我全新创建了它。这对我来说就像一个错误。我的意思是，我什至给复选框取了另一个名字。

是否有可能 "clear the browser memory regarding the checking-state of the checkbox" 或其他？

为了简单起见，我创建了这个最小示例。在我的代码中，复选框是在 foreach 中创建的，我也有非预期的行为。

很高兴听到您的意见 and/or 提示。蒂姆

这是我的剃须刀组件的代码：

<!--  Define 2 Radio-Buttons, User selects A or B  -->
<label>
    <input type="radio" name="RB_Type" @onclick="@(() => SelectType("A"))" /> Type A
</label>
<br />
<label>
    <input type="radio" name="RB_Type" @onclick="@(() => SelectType("B"))" /> Type B
</label>
<br />

<!--  The following code works as intended  -->
@if (accType == "A")
{
    <input type="checkbox" name="A1" unchecked><label>A1</label>
    <br />
    <input type="checkbox" name="A2" unchecked><label>A2</label>
    <br />
}
else if (accType == "B")
{
    <input type="checkbox" name="B1" unchecked><label>B1</label>
    <br />
    <input type="checkbox" name="B2" unchecked><label>B2</label>
    <br />
}


<!--  The following code does not work as intended  -->
@if (accType != "")
{
    <input type="checkbox" name="@(accType + "1")" unchecked><label>@(accType + "1")</label>
    <br />
    <input type="checkbox" name="@(accType + "2")" unchecked><label>@(accType + "2")</label>
    <br />
}




@code {

    private string accType = "";

    private void SelectType(string type)
    {
        this.accType = type;
        StateHasChanged();
    }
}

Answer 1

像这样添加一些 @key="" 属性：

@if (accType != "")
{
    <input type="checkbox" @key="@(accType + "1")" name="@(accType + "1")" unchecked><label>@(accType + "1")</label>
    <br />
    <input type="checkbox" @key="@(accType + "2")" name="@(accType + "2")" unchecked><label>@(accType + "2")</label>
    <br />
}

blazor diff 引擎会尽量减少更改。因此，当它在同一位置看到 2 个复选框时，它会假设它们相同。名称属性无助于区分 A 和 B 控件。

但是您会发现代码的第二个版本 (@(accType + "1")) 在数据绑定方面也很困难。

DOM 树更新的奇怪行为（客户端 blazor、razor、C# .net ASP.net 托管）

Maybe weird behaviour of DOM tree updating (client side blazor, razor, C# .net ASP.net hosted)

tree

dom

updating

razor

blazor