如何将 Blazor 组件中的选定值传递并绑定到父组件

Question

我想使用 Blazor 构建一些可重用的输入组件。

这是我在子组件中的代码：

<div style="width: 100%">
    <div class="create-approval-flow-drop-down">
        <Label Display="Display.Flex">@ChildLabel</Label>      
        <Autocomplete TItem="GraphUser"
                      TValue="string"
                      Data="@users"
                      TextField="@(( item ) => item.DisplayName)"
                      ValueField="@(( item ) => item.DisplayName)"
                      Placeholder="Search..."
                      @bind-SelectedValue="@selectedSearchValue"
                      @bind-SelectedText="@selectedAutoCompleteText">
        </Autocomplete>
    </div>
</div>

@code {

    [Parameter] public string ChildLabel { get; set; }
    [Parameter] public string ChildValue { get; set; }
    [Parameter] public string selectedSearchValue { get; set; }
    [Parameter] public EventCallback<string> ChildLabelChanged { get; set; }
    [Parameter] public EventCallback<string> ChildValueChanged { get; set; }
    [Parameter] public EventCallback<string> selectedSearchValueChanged { get; set; }

    [Inject] public IGraphService GraphService { get; set; }
    public IEnumerable<GraphUser> users = new List<GraphUser>();
    protected override async Task OnInitializedAsync()
    {
        users = await GraphService.GetUsers();
        await base.OnInitializedAsync();
    }

    private Task OnChildValueChanged(ChangeEventArgs e)
    {
        return ChildValueChanged.InvokeAsync(selectedAutoCompleteText);
    }

    string selectedAutoCompleteText { get; set; }   
}

这是我的父组件：

@page "/Test"
@using WireDesk.Web.SubComponents;
@using Blazored.FluentValidation;
@using WireDesk.Models

<WireDesk.Web.SubComponents.SelectAutocomplete.SingleSelectAutoComplete 
ChildLabel="Location Manager"
ChildValue="">
</WireDesk.Web.SubComponents.SelectAutocomplete.SingleSelectAutoComplete>

@ChildLabel;
@ChildValue;

@code 
{
    private string ChildLabel { get; set; }
    private string ChildValue { get; set; }
    public ApprovalFlowForm approvalFlowForm = new ApprovalFlowForm();
}

孩子将显示 label 并创建一个 select 自动完成文本框。 父级将包含一个包含各种字段的表单，其中许多将是单个 select 自动完成文本框。

我不想在父组件中一遍又一遍地复制子组件中的代码，但我无法确定如何传递用户在子组件中选择的字符串。

Answer 1

在子级中使用 EventCallBack 并将其分配给父级中的 function。 做这样的事情。 在父组件中：

<ChildComponent TextFieldUpdated="HandleChange" />

以及以下代码：

private void HandleChange(string value){
    Do stuff...
}

在子组件中：

[Parameter] public EventCallBack<string> TextFieldUpdated {get;set;}

然后，当您想将值发送到父组件时，您所要做的就是：

TextFieldUpdated.InvokeAsync("String Value");

父组件中的 HandleChange() 将使用子组件中的值触发。

Answer 2

您可以使用EventCallback来做到这一点（如@Joe 建议的那样）。

<div style="width: 100%">
    <div class="create-approval-flow-drop-down">
        <Label Display="Display.Flex">@ChildLabel</Label>
        <Autocomplete TItem="GraphUser"
                      TValue="string"
                      Data="@users"
                      TextField="@(( item ) => item.DisplayName)"
                      ValueField="@(( item ) => item.DisplayName)"
                      Placeholder="Search..."
                      SelectedValue="@ChildValue"
                      SelectedValueChanged="OnChildValueChanged">
        </Autocomplete>
    </div>
</div>

@code {
    [Parameter] public string ChildLabel { get; set; }
    [Parameter] public string ChildValue { get; set; }
    [Parameter] public EventCallback<string> ChildValueChanged { get; set; }

    [Inject] public IGraphService GraphService { get; set; }
    public IEnumerable<GraphUser> users = new List<GraphUser>();
    
    protected override async Task OnInitializedAsync()
    {
        users = await GraphService.GetUsers();
        await base.OnInitializedAsync();
    }

    private async Task OnChildValueChanged(string selectedValue)
    {
        ChildValue = selectedValue;
        await ChildValueChanged.InvokeAsync(ChildValue);
    }
}

用法：

@page "/Test"
@using WireDesk.Web.SubComponents;
@using Blazored.FluentValidation;
@using WireDesk.Models

<WireDesk.Web.SubComponents.SelectAutocomplete.SingleSelectAutoComplete 
    ChildLabel="Location Manager"
    @bind-ChildValue="@childValue">
</WireDesk.Web.SubComponents.SelectAutocomplete.SingleSelectAutoComplete>

@childValue;

@code {
    private string childValue;
    public ApprovalFlowForm approvalFlowForm = new ApprovalFlowForm();
}