Может быть, странное поведение обновления дерева DOM (на стороне клиента, бритва, C # .net ASP.net размещен)

Привет,

Я только что сделал странный опыт с обновлением дерева DOM в Blazor.

Код прост:

1) пользователь может выбирать между 2 типами A или B с радиокнопками.

2) при выборе A или B дополнительные параметры отображаются в виде флажков (A позволяет выбирать A1 и / или A2, B позволяет выбирать B1 и / или B2).

Большой вопрос: что произойдет, если вы сделаете следующее:

3) выберите A (=> появляются два флажка A1 и A2)

4) проверить А1

5) выберите B (=> A1 и A2 исчезают, появляются флажки B1 и B2)

6) посмотрите на состояние B1

Я сделал 2 разные версии:

7) один, где я определяю флажки для A и B отдельно -> это работает как задумано (= B1 и B2 не проверены)

8) один, где я определяю их напрямую, но с правильным именем -> это не работает! В1 проверено!

Насколько я понимаю, при выборе 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();
    }
}

Всего 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 флажка в одном месте, он будет предполагать, что они одинаковы. Свойство name не помогает различать элементы управления A и B.

Но вы обнаружите, что эта 2-я версия ( @(accType + "1") ) вашего кода также сложна в привязке данных.


Есть идеи?

10000