Сделать функцию по клику в компоненте

Question

У меня есть кнопка:

<BSButton Color="Color.Info" @onclick="LoadCategoryDetailsModal">
     <i class="fal fa-plus-circle mr-1"></i>Add New Category
</BSButton>

У меня есть компонент:

<CategoryDetails CategoryDetailModalTitle="@categoryDetailModalTitle">
</CategoryDetails>

В компоненте у меня есть функция для переключения модального режима (показать / скрыть); по умолчанию модал скрыт

@using BlazingShop.Services
@inject ICategoryService CategoryService

<BSModal @ref="CategoryDetailsModal" IsCentered="true">
    <BSModalHeader OnClick="@OnToggle">@CategoryDetailModalTitle</BSModalHeader>
    <BSModalBody><p>Modal body text goes here.</p></BSModalBody>
    <BSModalFooter>
        <BSButton Color="Color.Primary">Save Changes</BSButton>
        <BSButton Color="Color.Secondary" @onclick="@OnToggle">Close</BSButton>
    </BSModalFooter>
</BSModal>

@code {

    BSModal CategoryDetailsModal;

    [Parameter]
    public string CategoryDetailModalTitle { get; set; }

    void OnToggle(MouseEventArgs e)
    {
        CategoryDetailsModal.Toggle();
    }
}

Я пытаюсь переключить модал с родительского компонента.

Можете ли вы мне помочь, пожалуйста?

Когда я нажимаю на эту кнопку (в родительском компоненте):

<BSButton Color="Color.Info" @onclick="LoadCategoryDetailsModal">
    <i class="fal fa-plus-circle mr-1"></i>Add New Category
</BSButton>

Я хочу, чтобы эта функция внутри дочернего компонента:

CategoryDetailsModal.Toggle();

Answer 1

Если в родительском компоненте у вас есть дочерний компонент:

<CategoryDetails CategoryDetailModalTitle="@categoryDetailModalTitle"></CategoryDetails>

и кнопка:

<BSButton Color="Color.Info" @onclick="LoadCategoryDetailsModal"><i class="fal fa-plus-circle mr-1"></i>Add New Category</BSButton>

Затем вы можете определить метод с именем LoadCategoryDetailsModal, который выполняется, когда пользователь нажал на кнопку выше ... Метод LoadCategoryDetailsModal, я думаю, должен содержать код, который должен переключать окно модели ... Вы можете сделать что-то вроде этого:

private void LoadCategoryDetailsModal()
{
   CategoryDetailsModalRef.Toggle();
} 

CategoryDetailsModalRef - объект который содержит ссылку на дочерний компонент CategoryDetails. Вот как вы добавляете атрибут @ref для захвата ссылки на компонент CategoryDetails:

<CategoryDetails @ref="CategoryDetailsModalRef" CategoryDetailModalTitle="@categoryDetailModalTitle"></CategoryDetails>

И в блоке @code вы определяете: CategoryDetails CategoryDetailsModalRef;

Обратите внимание, что код выше Предположим, что вы определили метод с именем Toggle () в компоненте CategoryDetails, роль которого заключается в переключении отображения модального окна, возможно, путем изменения логической переменной с true на false и наоборот.

Надеюсь, что это помогает ...

Answer 2

Эй, я просто нахожу ответ! Добавьте @ ref = "Modal" в свой компонент:

<CategoryDetails CategoryDetailModalTitle="@categoryDetailModalTitle" @ref="@Modal"></CategoryDetails>

в разделе @Code:

private CategoryDetails Modal { get; set; }

В методе, когда вы нажимаете на кнопку:

 private void LoadCategoryDetailsModal()
    {
        category = new Category();
        categoryDetailModalTitle = "Add New Category";
        Modal.Toggle();
    }

Включите метод, который я сделал в дочернем компоненте:

public void Toggle()
    {
        CategoryDetailsModal.Toggle();
    }