将 Setter 从父级传递给子级 Blazor

Question

In Blazor Server Side, how can I pass a setter method from a parent component to a child? This seems super simple but I'm just not making it work.

In the parent (a Syncfusion tabs "wizard" component) there's vars to determine whether or not a tab should be enabled. So in the parent there's something like

<SfTab CssClass="BlazorTab" @bind-SelectedItem="SelectedPage" LoadOn="ContentLoad.Demand">
    <TabItems>
        <TabItem>
            <ChildContent>
                <TabHeader Text="Select Media"></TabHeader>
            </ChildContent>
            <ContentTemplate>
                <div id="mediaSelect">
                    <div class="wizard-title">Media Selection</div>
                            <ImageUploader SetMediaOption="@SetMediaOption" />
                        </div>
                        <div class="btn-container">
                            <SfButton >Upload media</SfButton>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </TabItem>
        <TabItem Disabled="@MediaOptions">
            <ChildContent>
                <TabHeader Text="Select Options"></TabHeader>
            </ChildContent>
            <ContentTemplate>
                <div id="mediaOptions">
                    <div class="wizard-title">Select media import options</div>
                    
                    <br />
                    <div class="btn-container">
                        <SfButton @onclick="@SelectMediaPrevious">Previous</SfButton>
                        <SfButton @onclick="@SelectMediaNext">Next</SfButton>
                    </div>
                </div>
            </ContentTemplate>
        </TabItem>
@code{
    public bool MediaOption { get; set; } = true; // disabled initially
    public void SetMediaOption(bool Value)
    {
        MediaOption = Value;
    }
}

The child component ( ImageUploader ) needs to change the value of MediaOption from true (disabled) to false (enabled) when there's at least one image uploaded. However, I can't seem to get the right type defined for the app to compile. Is it possible to just pass in the actual MediaOption getter / setter, or do I need to do the SetMediaOption method? If so, how do I define the parameter in the child component?

I've tried many variations of

[Parameter]
public EventCallback<bool> SetMediaOption { get; set; }

but the parent variable isn't changed (or it just fails to compile since the params type is incorrect)

Answer 1

You haven't shared the child, but I'm assuming you call SetMediaOption?.InvokeAsync(true); at some point in your child. Your event handler is void, which (I believe) will not trigger StateHasChanged authomatically. So you should add StateHasChanged() at the end of the SetMediaOption method.

Another option, that I didn't mention in my original post, is that you can change your event-handling method to async Task rather than void .

Last thing, if you DO use an async Task , and you want to call StateHasChanged in the middle for some reason, use await InvokeAsync(StateHasChanged) instead of StateHasChanged()

Answer 2

In the Syncfusion blazor release 20.2.39 , an issue with Disable state of the tab item not working properly has been fixed. So, you can resolve the problem by upgrading the Syncfusion blazor packages version to the latest.

Release notes: https://blazor.syncfusion.com/documentation/release-notes/20.2.39?type=all#tab