Blazor отправить входной текст дочерний родительский

Question

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>

@code {

[Parameter]
public string IncrementAmount
{
    set
    {
        currentCount = Convert.ToInt32(value);
    }
}

public int currentCount { get; set; }

[Parameter] public EventCallback<string> OnClick { get; set; }

async  Task IncrementCount()
{
    if (OnClick.HasDelegate)
    {
        currentCount=currentCount+1;

        await OnClick.InvokeAsync(DateTime.Now.ToString());//<-commenting this line updates currentCount 
    }
}
}

Почему currentCount не обновляется, когда я нажимаю кнопку в дочернем компоненте? CurrentCount обновляется, когда я комментирую строку OnClick.InvokeAsyn c. OnClick.InvokeAsyn c отправляет значение обратно родителю без каких-либо проблем. (На самом деле я хочу отправить currentCount родительскому элементу, и поскольку currentCount не обновляется, я отправляю фиктивное значение datetime обратно в parent).

Я следовал этому примеру: Blazor отправляет входной текст обратно родительский компонент

Answer 1

Обратите внимание, что в компоненте Counter отсутствует директива @page, поскольку он является дочерним компонентом.

Обратите внимание, что компонент Counter определяет два свойства параметра, которые установлены в родительском компоненте (Index). Первый называется Amount, а второй называется AmountChanged. Эта пара разработана так по соглашению: имя свойства, которое будет содержать значение, переданное из родительского компонента, и EventCallback «делегат» для обратного вызова и обновления свойства родителя. Вот как мы используем двустороннюю привязку данных между двумя компонентами (родительский и дочерний). И вот как мы объявляем привязку в родительском компоненте: <Counter @bind-Amount="Amount" />

Если, например, вы измените Сумма на Количество следующим образом:

<Counter @bind-Count="Amount" />

Свойства параметров пары в компоненте Counter должны называться Count и CountChanged соответственно.

Самое важное, что нужно понять, это то, что это как мы создаем двустороннюю привязку данных между Components .

Counter.razor

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>

@code {


[Parameter]
public int Amount { get; set; }
[Parameter] public EventCallback<int> AmountChanged { get; set; }


private int currentCount { get; set; }

protected override void OnInitialized()
{
    currentCount = Amount;
}


async Task IncrementCount()
{
    currentCount = currentCount + 1;

    if (AmountChanged.HasDelegate)
    {
        await AmountChanged.InvokeAsync(currentCount);
    }
}
}

Index.razor

@page "/"


<p>Amount in parentcomponent: @Amount.ToString()</p>

<Counter @bind-Amount="Amount" />

@code{
   private int Amount { get; set; } = 120;

}

Примечание: вам не нужно определять свои значения в виде строки. На самом деле вы можете определить сумму как int и позволить системе позаботиться о преобразовании их.