时间戳

首页 > 解决方案 > blazor 将输入文本子项发送给父项

blazor - blazor 将输入文本子项发送给父项

问题描述

<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 没有更新？当我评论 OnClick.InvokeAsync 行时，currentCount 正在更新。OnClick.InvokeAsync 将值发送回父级，没有任何问题。（实际上我想将 currentCount 发送给父级，并且由于 currentCount 没有更新我将一个虚拟的日期时间值发送回父级）。

我遵循了这个示例：Blazor 将输入文本发送回父组件

标签： blazor

解决方案

请注意，计数器组件缺少 @page 指令，因为它是子组件。

请注意，Counter 组件定义了在父组件 (Index) 中设置的两个参数属性。第一个名为 Amount，第二个名为 AmountChanged。这对是按照约定设计的：将包含从父组件传递的值的属性名称，以及用于回调和更新父组件的 EventCallback 'delegate'。这就是我们在两个组件（父组件和它的子组件）之间使用双向数据绑定的方式。这就是我们在父组件中声明绑定的方式：<Counter @bind-Amount="Amount" />

例如，如果您将Amount更改为Count，如下所示：

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

Counter 组件中的 pair 参数属性应分别命名为Count和CountChanged。

要意识到的最重要的事情是，这就是我们在Components之间创建双向数据绑定的方式。

反剃刀

<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);
    }
}
}

索引.razor

@page "/"


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

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

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

}

注意：您不必将值定义为字符串。您可以，实际上您应该将 amount 定义为 int，并让系统负责转换它们。

推荐阅读