在组件中单击时执行功能

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>

然后，您可以定义一个名为 LoadCategoryDe​​tailsModal 的方法，该方法在用户单击上述按钮时执行...我猜 LoadCategoryDe​​tailsModal 方法应该包含应该切换模型窗口的代码...您可以像这样：

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

CategoryDe​​tailsModalRef 是一个包含对 CategoryDe​​tails 子组件。这就是您将@ref 属性添加到 捕获对 CategoryDe​​tails 组件的引用：

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

并且在您定义的@code 块中：CategoryDetails CategoryDetailsModalRef;

请注意，上面的代码假设您已经定义了一个名为 Toggle() 的方法 CategoryDe​​tails 组件的作用是切换模式窗口的显示，可能通过将布尔变量从 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();
    }

Toggle 是我在 Child 组件中做的一个方法：

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