在组件中单击时执行功能

Question

我有一个按钮 :

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

我有一个组件：

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

在组件中，我有一个切换模式的功能(show/hide)；模态框默认隐藏

@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

嘿，我刚找到答案！在您的组件中添加 @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();
    }

Answer 2

如果您的父组件中有子组件：

<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 方法应该包含应该切换模型的代码 window ...你可以这样做：

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

CategoryDetailsModalRef 是一个包含对 CategoryDetails 子组件。这就是将 @ref 属性添加到捕获对 CategoryDetails 组件的引用：

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

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

请注意，上面的代码假定您已经在中定义了一个名为 Toggle() 的方法 CategoryDetails 组件，其作用是切换模态 window 的显示，可能是通过将布尔变量从 true 更改为 false，反之亦然。

希望这对您有所帮助...

在组件中单击时执行功能

Do a function on click in component

blazor

razor-components