如何使用输入元素在 C# Blazor 中将数据从子组件传输到其父组件？

Question

我在尝试利用可重用输入组件创建新的用户配置文件时遇到问题。当我尝试创建新用户时，输入可重用组件的所有数据都显示为空。我怀疑这是由于将数据从子组件传递到父组件时出现问题造成的。有趣的是，当我使用标准标签时，一切正常。任何有关如何解决此问题的见解或建议将不胜感激。提前致谢！ 主页 添加配置文件.razor

<form> 
       <div class="col-md-6">
                <Label LabelClass="small mb-1"  LabelText="@Loc[nameof(ResourcesEnum.GeneralFirstName)]"/>
                <Input InputPlaceholder="@Loc[nameof(ResourcesEnum.GeneralEnterFirstName)]" BindValue="@_contact.FirstName" InputClass="form-control" />
            </div>

        ...

    <div class="btn-wrapper">
        <Button BtnClass="btn btn-primary" IconClass="bi bi-plus-lg" OnClick="Submit" />
        <Button BtnClass="btn btn-danger" IconClass="bi bi-x-circle" OnClick="() => CancelModalWindow()" DataToggle="modal" DataTarget="#exampleModal"/>
    </div>
    </form>

@code {

    private ContactDTO _contact = new ContactDTO();
    private List<PartnerDTO>? _partners = new List<PartnerDTO>();
    private bool _switchAddPartner = false;
    private ModalBootstrap? _modalComponent;
    private string? _returnUrl;
    private string _submitText = "Save contact";
    private string _exam;
    
    protected override async Task OnInitializedAsync()
    {
        _partners = (await PartnerService.GetAllPartners())?.ToList();
        var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("returnUrl", out var url))
        {
            _returnUrl = url!;
            _submitText = "Save and return";
        }
    }
    
    void HandleInputValueChanged(string value)
    {
        // Update the input value in the parent component
        _contact.FirstName = value;
    }
    
    private void HandleInputData(string inputValue)
    {
        _contact.FirstName = inputValue;
        Console.WriteLine($"it is value input: {_contact.FirstName}!!!!!");
    }
    
    private void NavigateUrlContactsPage()
    {
        NavigationManager.NavigateTo("/contacts");
    }
    
    private void Cancel()
    {
        if (!string.IsNullOrEmpty(_returnUrl))
        {
            NavigationManager.NavigateTo(_returnUrl);
        }
        else
        {
            NavigateUrlContactsPage();
        }
    }
    
    private async Task Submit()
    {
        Console.WriteLine($"Before Submit: {_contact.FirstName}");
        try
        {
            var createdContact = await ContactService.CreateContactAsync(_contact);
            
            if (!string.IsNullOrEmpty(_returnUrl))
            {
                Console.WriteLine(createdContact.FirstName);
                var returnUrlWithNewContact = $"{_returnUrl}?newContactId={createdContact.Id}";
                NavigationManager.NavigateTo(returnUrlWithNewContact);
            }
            else
            {
                Console.WriteLine($"Error{_contact.FirstName}");
                NavigateUrlContactsPage();
            }
            Snackbar.Add($"\u2795 {_contact.FullName}", Severity.Success);
        }
        catch (Exception ex)
        {
            Snackbar.Add($"{@Loc[nameof(ResourcesEnum.GeneralError)]}: {ex.Message}", Severity.Error);
        }
    }
    
    private void CancelModalWindow()
    {
        _modalComponent.ShowModal($"{@Loc[nameof(ResourcesEnum.GeneralConfirmExit)]}", $"{@Loc[nameof(ResourcesEnum.GeneralConfirmExitQuestion)]}",()=>Cancel() );
    }

}

Input.razor（可重用组件）

<input class="@InputClass" type="@InputType" placeholder="@InputPlaceholder" @bind="@BindValue"/>

@code {
    [Parameter] public string InputType { get; set; }
    [Parameter] public string InputClass { get; set; }
    [Parameter] public string InputPlaceholder { get; set; }
    [Parameter] public string BindValue { get; set; }
}

Answer 1

我重新创建了你的组件，希望一切正常。 下面是我的 CInput。我只是更改了绑定才能正常工作。在 blazor 中，@bind-SomeValue 是处理 2 个单独参数的简化语法。一个是要传递的值，另一个是通过 EventCallback 接收的值。为了使其工作，两个参数必须具有相同的名称，但 EventCallback 需要在末尾添加“Changed”一词。当我使用它时，字符串是双向传递的。如果这不是您的问题，请提供更多反馈。

<input class="@ParamInputClass" type="@ParamInputType" placeholder="@ParamInputPlaceholder" value="@ParamBindValue" @onchange="OnValueChanged" />

@code {
    [Parameter] public string ParamInputType  { get; set; } = "text";
    [Parameter] public string ParamInputClass { get; set; } = string.Empty;
    [Parameter] public string ParamInputPlaceholder { get; set; } = string.Empty;

    [Parameter] public string ParamBindValue { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> ParamBindValueChanged { get; set; }

    protected async Task OnValueChanged(ChangeEventArgs? val)
    {
        if (val is null || val.Value is null) { return; }
        string ConvertedToString = ((string) val.Value) ?? string.Empty ;
        // Add whatever logic here or even some validation if not using fluent validation on form
        await ParamBindValueChanged.InvokeAsync(ConvertedToString);
    }
}

这是正在使用它的组件。

<CInput ParamInputType="text" ParamInputPlaceholder="Some Text" ParamInputClass="fs-3"   @bind-ParamBindValue="@Text" />

<div>
    @Text
</div>

@code {
    string Text = "Start value";
}