使用 blazor 服务器从子组件调用父组件中的方法

Question

我正在使用 Blazor 服务器进行开发，并且有一个父组件 下面称为 EventCallBackParent。

        @page "/eventcallbackparent"

        <h3>EventCallBackParent</h3>

        <div>
            <EventCallBackChild onDoneButtonClicked=" "></EventCallBackChild>
        </div>

这是我的父组件的 c# 类/代码

        public partial class EventCallBackParent
            {

                public async void Done()
                {
                    //Call a method here
                    ModalDisplay = "none";
                    ModalClass = "";
                    StateHasChanged();
                }
            }

这是我的子组件的样子

        <h3>EventCallBackChild</h3>

        <div class="row align-items-center py-3">
            <div class="col-auto d-flex align-items-center">
                <div class="card" @onclick="DoneButtonClicked">
                    <div class="card-body">
                        <p>Standard</p>
                    </div>
                </div>
            </div>
        </div>


        @code {
         
            [Parameter]
            public EventCallback onDoneButtonClicked { get; set; }

            protected async Task DoneButtonClicked()
            {

            }
        }

这就是我想要发生的事情。单击标准卡时，我想 在我的父组件中调用 Done 方法。这可能吗？如果是，如何 我可以去吗？

Answer 1

由于您已经在子组件中声明了EventCallback 参数，您只需在DoneButtonClicked 方法中调用该回调：

[Parameter]
public EventCallback onDoneButtonClicked { get; set; }

protected async Task DoneButtonClicked()
{
    await onDoneButtonClicked.InvokeAsync();
}

在您的父组件中，您必须将子组件的 onDoneButtonClicked 参数与父组件的 Done 方法链接：

<div>
    <EventCallBackChild onDoneButtonClicked="Done"></EventCallBackChild>
</div>