时间戳

首页 > 解决方案 > 如何将两种方式绑定到子组件中的选择 - Blazor

blazor - 如何将两种方式绑定到子组件中的选择 - Blazor

问题描述

我试图将两种方式绑定到子组件中的选择元素。Parent 应该能够更改 Child Select 的选定值，并且 Child Select 在更改时应该回调到 parent，以便它可以对新值做出反应。但是我似乎只能传递给孩子，而不是触发事件到父母。

我的父组件包含一个包含选择的子组件。父组件如下所示：

        <SelectInput @bind-Value="Selected">
            @ChildContent
        </SelectInput>

@code{

    [Parameter]
    public string Selected { get; set; }
    [Parameter] 
    public RenderFragment ChildContent { get; set; }
    [Parameter] 
    public EventCallback<string> SelectedChanged { get; set; }

    private async Task ValueChanged(string val)
    {
        await SelectedChanged.InvokeAsync(val);
    }
}

ValueChanged 和 SelectedChanged 都没有被调用。这是我想解决的问题。

子组件是 SelectInput 组件：

        <select value="@Value"
            @onchange="OnValueChanged">
            @ChildContent
        </select>
        
        @code{
            [Parameter]
            public string Value { get; set; }
            [Parameter] 
            public RenderFragment ChildContent { get; set; }
        
            public async Task OnValueChanged(ChangeEventArgs e)
            {
                Value = e.Value.ToString();
                await ValueChanged.InvokeAsync(Value);
            }
        }

此子元素正在工作并正在调用 ValueChanged 回调。但是我无法在父级中捕获回调，因为它已经被编译代码调用，因为绑定值（我需要它，因为它也可以在这个父控件之外更改。再次向下绑定正在工作，但是我也需要绑定在这种情况下向上 - 或者至少捕捉事件并将其向上传播。任何帮助将不胜感激:)

标签： blazor

解决方案

注意：不应改变参数属性。它们仅用于在组件之间流动数据。为简单起见，我忽略了这一点。

祖父母

@page "/"

Type a value USA ,France,etc.:
<input type="text" @bind="Selected" @bind:event="oninput" />

<ParentComponent @bind-Value="Selected"></ParentComponent>

@code{
     private string Selected { get; set; } = "Germany";
}

父组件.razor

<SelectInput @bind-Value="Value"></SelectInput>

@code{
    private string _value;

    [Parameter]
    public string Value
    {
        get => _value;
        set
        {
            if(_value != value)
            {
                _value = value;
                _ = ValueChanged.InvokeAsync(_value);
            }
        }
    }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

}

选择输入.razor

<select value="@Value" @onchange="OnValueChanged">
    <option value="USA">USA</option>
    <option value="France">France</option>
    <option value="China">China</option>
    <option value="Germany">Germany</option>
    
</select>

@code{
    [Parameter]
    public string Value { get; set; }

    

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }


    public async Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();
        await ValueChanged.InvokeAsync(Value);
    }
}

推荐阅读