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

Question

我有子组件

<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 值，它只是空的。是否可以根据孩子的价值构建项目？

Answer 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 属性。

注意：您可以定义一个本地方法来调用 OnClick 'delegate'，而不是使用 lambda 表达式；这是父级的 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);
    }
}

希望这可以帮助...