Blazor 将输入文本发送回父组件答案

【问题标题】：Blazor send input text back to parent componentBlazor 将输入文本发送回父组件
【发布时间】：2019-09-12 18:40:45
【问题描述】：

我有子组件

<input type="text" @bind="@Item" />
<button class="btn btn-primary" onclick="@OnClick">@ButtonText</button>

@code {
    [Parameter]
    public string ButtonText { get; set; } = "Submit";

    [Parameter]
    public string Item { get; set; }

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

}

及其父组件

@using System;

<HeadingComponent HeadingText="@HeadingText" />

<ListItemsComponent Items="@ListItems" />

<SubmitButtonComponent Item="@Item" ButtonText="add item" OnClick="@AddItem" />

@code {
    [Parameter]
    public string HeadingText { get; set; } = "MyList";

    [Parameter]
    public List<string> ListItems { get; set; } = new List<string> { "One", "Two" };

    public string Item { get; set; }

    private void AddItem(UIMouseEventArgs e)
    {
        ListItems.Add(Item);
    }
}

提交按钮确实有效，但它没有读取从子组件发送的 Item 值，它只是空的。是否可以将项目构建为来自孩子的价值？

【问题讨论】：

您使用的是什么版本（blazor 和 dotnet）？
应该是最新最伟大的
然后使用@ref关键字检查我的单向绑定答案:)

标签： c# blazor

【解决方案1】：

解决方案1：假设要求是将输入到驻留在子组件中的文本框中的输入值传递给父组件：

提交按钮组件.razor

当你点击子组件中的提交按钮时，会触发父组件上的方法。如果您想将项目从子组件传递给父组件，您应该这样做：

<button class="btn btn-primary" @onclick="@(() => OnClick?.InvokeAsync(Item))">@ButtonText</button>

@code {
    [Parameter]
    public string ButtonText { get; set; } = "Submit";

    public string Item { get; set; }

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

}

注意：onclick="@OnClick" 应该是@onclick="@OnClick"：@onclick 是一个属性指令，告诉编译器要做什么。它不是许多人倾向于相信的 Html 属性。

注意：我已经从 Item 属性中删除了 Parameter 属性。

注意：您可以定义一个本地方法，而不是使用 lambda 表达式，您可以从该方法调用 OnClick 'delegate'；也就是父级的 AddItem 方法是这样的：

<button class="btn btn-primary" @onclick="@OnClickInternal">@ButtonText</button>

还有：

async Task OnClickInternal()
    {
       // verify that the delegate associated with this event dispatcher is non-null
        if (OnClick.HasDelegate)
        {
            await OnClick.InvokeAsync(Item);
        }
    }

父组件

@using System;

<HeadingComponent HeadingText="@HeadingText" />

<ListItemsComponent Items="@ListItems" />

<SubmitButtonComponent ButtonText="add item" OnClick="@AddItem" />

@code {
    [Parameter]
    public string HeadingText { get; set; } = "MyList";

    [Parameter]
    public List<string> ListItems { get; set; } = new List<string> { "One", "Two" };

    // Note: this property has been removed
    // public string Item { get; set; }

    private void AddItem(string item)
    {
        ListItems.Add(item);
    }
}

希望这会有所帮助...

【讨论】：