How do I propagate a component parameter binding upstream?

Question

Here's the code:

TestComponentA.razor

<div style="border: 1px solid; padding: 4px;">
    <input @bind-value=this.TestParamA />
    Test Param A: @this.TestParamA
</div>
@code {
    [Parameter]
    public string TestParamA { get; set; } = null!;
    [Parameter]
    public EventCallback<string> TestParamAChanged { get; set; }
}

TestComponentB.razor

<div style="border: 1px solid; padding: 4px;">
    <TestComponentA @bind-TestParamA=this.TestParamB></TestComponentA>
    Test Param B: @this.TestParamB
</div>
@code {
    [Parameter]
    public string TestParamB { get; set; } = null!;
    [Parameter]
    public EventCallback<string> TestParamBChanged { get; set; }
}

Home.razor

@page "/"

<PageTitle>Home</PageTitle>
<div style="border: 1px solid; padding: 4px;">
    <TestComponentB @bind-TestParamB=this.TestParamC></TestComponentB>
    Test Param C: @this.TestParamC
</div>
@code {
    public string TestParamC = "45";
}

After the page loads, this is the result after typing test into the input:

I need the text input to propagate up from the innermost component to the topmost. How do I do this?

Answer 1

Using the @bind:get and @bind:set attributes,

Foo.razor:

<input @bind:get="FooString" @bind:set="s => OnSet.InvokeAsync(s)"/>

@code {
    
    [Parameter]
    public string FooString { get; set; }
    
    [Parameter]
    public EventCallback<string> OnSet { get; set; }
    
}

Bar.razor:

<Foo FooString="@BarString" OnSet="OnSet"/>
<p>BarString is @BarString</p>

@code {
    
    [Parameter]
    public string BarString { get; set; }
    
    [Parameter]
    public EventCallback<string> OnSet { get; set; }
    
}

Baz.razor:

<Bar BarString="@_value" OnSet="OnSet"/>
<p>Baz value is @_value</p>

@code {

    private string _value = "hello world";

    private void OnSet(string value)
    {
        _value = value;
    }

}

This will propagate the new value of the input field upward and trigger a rerender for all the components in the hierarchy.