使用 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方法中调用该回调即可：

\n

[Parameter]\npublic EventCallback onDoneButtonClicked { get; set; }\n\nprotected async Task DoneButtonClicked()\n{\n    await onDoneButtonClicked.InvokeAsync();\n}\n

\n

在父组件中，您必须将onDoneButtonClicked子组件的此参数与父组件\xe2\x80\x99sDone方法链接起来：

\n

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

\n