也许是DOM树更新的怪异行为（客户端blazor，razor，C＃.net ASP.net托管）

Question

你好，

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

代码很简单：

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

2）当选择A或B时，更多选项显示为复选框（A允许您选择A1和/或A2，B允许您选择B1和/或B2）。

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

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

4）检查A1

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

6）查看B1的状态

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

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

8）一个，在这里我直接定义它们，但是使用正确的名称->这不起作用！ B1已检查！

据我了解，选择B（第5步）时，blazor将更新DOM树。但是我不明白为什么浏览器会记住复选框B1为选中状态，这仅仅是因为我选中了A1，即使我创建了一个全新的复选框也是如此。在我看来，这似乎是个错误。我的意思是，我甚至给复选框起了另一个名字。

是否有可能“清除与复选框的检查状态有关的浏览器内存”或其他？

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

很高兴听到您的意见和/或提示。蒂姆

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

<!--  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个复选框时，将假定它们are相同。 name属性无助于区分A和B控件。

但是您会发现代码的第二版本（@(accType + "1")）也很难进行数据绑定。