使用 Blazor Server 从子组件调用父组件中的方法。

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方法。这种情况是否可能？如果是，我该怎么做呢？

- Baba

Answer 1

因为您已经在子组件中声明了一个 EventCallback 参数，所以您只需要在 DoneButtonClicked 方法内调用该回调:

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

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

在您的父组件中，您需要将子组件的 onDoneButtonClicked 参数与父组件的 Done 方法联系起来：

您的父组件中需要链接子组件的 onDoneButtonClicked 参数和父组件的 Done 方法。

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

- poke

---

每当我在 Blazor 中使用 EventCallback 时，我就会停下来想：“如果我还在用 Web Forms 呢？”然后我会看着阳光灿烂，听听窗外的鸟儿唱歌，明白人们说生活美好是什么意思。:D - Bennyboy1973

运行得非常好。伟大的解决方案。 - Baba

Answer 2

另一种选择是将父组件传递给子组件。

父组件：

<div>
    <EventCallBackChild Parent="this"></EventCallBackChild>
</div>

@code {
   public void Done() {
      // code...

      // Don't forget to call StateHasChanged
      StateHasChanged();
   }
}

子元素：

[Parameter]
public ParentComponent Parent { get; set; }

protected void DoneButtonClicked()
{
    Parent.Done();
}

注意：这个答案是一个替代方案，但可能不是这个特定用例的最佳答案。

- Philz97