Может быть странное поведение обновления дерева DOM (хост на стороне клиента, бритва, C#. net ASP. net) - PullRequest
Новая
       5

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

1 голос
/ 09 февраля 2020

Привет,

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

Код прост:

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

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

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

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

4) проверьте A1

5) выберите B (=> A1 и A2 vani sh, появятся флажки 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();
    }
}

1 Ответ

2 голосов
/ 09 февраля 2020

Добавьте некоторые атрибуты @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 не помогает различать guish между элементами управления A и B.

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

...