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

【问题标题】：blazor send input text child to parentblazor 将输入文本子项发送给父项
【发布时间】：2020-01-18 20:52:46
【问题描述】：

<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 send input text back to parent component

【问题讨论】：

标签： blazor

【解决方案1】：

请注意，Counter 组件缺少@page 指令，因为它是一个子组件。

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

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

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

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

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

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;

}

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

【讨论】：