时间戳

首页 > 解决方案 > 可能是 DOM 树更新的奇怪行为（客户端 blazor、razor、C# .net ASP.net 托管）

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

问题描述

你好呀，

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

代码很简单：

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

2）选择A或B时，将出现更多选项作为复选框（A LETS您选择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）时，Ellazor会更新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();
    }
}

标签： domrazortreeblazorupdating

解决方案

添加一些@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 差异引擎尝试最小化更改。因此，当它在同一个地方看到 2 个复选框时，它会假设它们是相同的。name 属性无助于区分 A 和 B 控件。

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

推荐阅读