Почему @ref на стороне сервера Blazor некорректно отображается после удаления элементов? - PullRequest
Новая
       103

Почему @ref на стороне сервера Blazor некорректно отображается после удаления элементов?

0 голосов
/ 01 августа 2020

Вот мой код в интерфейсе: 

    @page "/"
    @inject IJSRuntime JSRuntime
    
    <ul>
        @foreach (TestClass i in TestList)
        {
            if (i.Count != 0)
            {
            <li>
                <button @onclick="() => RemoveVoid(i)" style="display:inline-block">Remove</button>
                <p @ref="@i.Reference" style="display:inline-block">@(string.Format("{0}×{1}", @i.Name, i.Count))</p>
                <button @onclick="() => AddVoid(i)" style="display:inline-block">Add</button>
            </li>
            }
        }
    </ul>
    
    @code{
        public class TestClass
        {
            public string Name;                
            public int Count=1;
            public ElementReference Reference;
    }
    List<TestClass> TestList = new List<TestClass>()
{
        new TestClass(){ Name="Apple" },
            new TestClass(){ Name="Pear" },
            new TestClass(){ Name="Banana" },
            new TestClass(){ Name="Orange" },
            new TestClass(){ Name="Melon" }
    };
    void AddVoid(TestClass i)
    {
        i.Count++;
        StateHasChanged();
        JSRuntime.InvokeVoidAsync("AppFunctions.Test", i.Reference);
    }
    void RemoveVoid(TestClass i)
    {
        i.Count--;
        StateHasChanged();
    }
}

А вот код в JS: 

window.AppFunctions = {   
    Test: function (o) {
        o.style.backgroundColor = "red";
        setTimeout(function () {
            o.style.backgroundColor = "white";
        }, 2000);
    }    
};

Теперь это выглядит так: enter image description here

Firstly, we remove the Pear to 0.

And then we add the Banana to 2.

введите описание изображения здесь

Теперь вы обнаружите, что подсветка находится на апельсине, но не на банане правильно.

Что с этим не так?

1 Ответ

1 голос
/ 01 августа 2020

Используйте @key для управления сохранением элементов и компонентов При рендеринге списка элементов или компонентов, при котором элементы или компоненты впоследствии изменяются, алгоритм сравнения Blazor должен решить, какие из предыдущих элементов или компонентов можно сохранить и как объекты модели должны соответствовать им. Обычно этот процесс выполняется автоматически c и его можно игнорировать, но есть случаи, когда вы можете захотеть управлять процессом.

Ваша проблема решается с помощью атрибута @key, например: 

<p @key="@i" @ref="@i.Reference" style="display:inline-block">@(string.Format("{0}×{1}", @i.Name, i.Count))</p>

Примечание. Вызывать метод StateHasChanged необязательно ...

Почему бы вам не удалить объекты TestClass из списка с помощью метода Remove?

...