Blazor: привязка класса к элементам ввода напрямую

Question

В приложении со списком продуктов у меня есть родительский компонент, циклически отображающий продуктовые элементы, и дочерний компонент, отображающий детали для каждого продуктового элемента с использованием элементов ввода (флажок и текстовое поле). Я установил двустороннюю привязку непосредственно к элементам GroceryItem, и она работает нормально, если обновлять элементы с помощью входных данных.

Проблема в том, что я уведомляю родительский компонент о повторной визуализации самого себя. , Я знаю, что должен вызывать EventCallBack при обнаружении изменения, но я хочу избежать дублирования членов моего класса в качестве локальных переменных, просто чтобы иметь возможность использовать установщик для обнаружения изменения и вызывать EventCallBack. Другой трюк, который я нашел, состоял в том, чтобы вручную связать данные, но опять же это создает дублирование, поскольку мне нужно настроить обработчик событий для каждого элемента ввода.

Есть ли лучший способ?

I wi sh был механизм, с помощью которого я мог бы добавить больше обработчиков событий onchange к элементам ввода, чтобы вызывать EventCallBack ... Но поскольку bind занимает единственный доступный слот, я не могу.

// This is the child component

<li>
    <input type="checkbox" @bind=Item.Purchased />
    <input type="text" @bind=Item.Name />
</li>

@code
{
    [Parameter]
    public GroceryItem Item { get; set; }

    [Parameter]
    public EventCallback<GroceryItem> ItemChanged { get; set; }
}

Answer 1

Возможность зарегистрировать дополнительный обработчик для события, для которого вы привязываете, пока не поддерживается: https://github.com/dotnet/aspnetcore/issues/14365

Один из способов обойти это (у меня есть не пробовал это, но я думаю, что это может работать) может быть, чтобы определить вспомогательные свойства в вашем компоненте и привязать непосредственно к ним вместо этого. Приведенный ниже код демонстрирует это только для одного из них:

<li>
    <input type="text" @bind=Name />
</li>

@code
{
    [Parameter]
    public GroceryItem Item { get; set; }

    private string Name
    {
      get => this.Item.Name;
      set => this.Item.Name = value;
    }

    [Parameter]
    public EventCallback<GroceryItem> ItemChanged { get; set; }
}

Если это не сработает, я его удалю, чтобы люди не запутались в неправильном ответе. Просто попытка помочь.

Если это работает, вы можете запустить свое событие в установщике свойства helper.

Answer 2

Если вы хотите вызвать метод родительского компонента из дочернего, вам нужно использовать EventCallback. Однако есть много способов вызвать метод в дочернем компоненте из родительского компонента. Чтобы узнать больше, смотрите Blazor LifeCycle и RenderTree. родительский компонент имеет полный контроль над своими потомками, но потомок вызывает родителей только с помощью обратного вызова.