对点击组件执行功能

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>

然后，您可以定义一个名为LoadCategoryDetailsMode的方法，该方法在用户单击上面的按钮时执行。。。LoadCategoryDetailsMode方法，我想，应该包含应该切换Model窗口的代码。。。你可以这样做：

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>

在@代码部分：

private CategoryDetails Modal { get; set; }

在方法中单击按钮时：

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

切换它是我在Child组件中使用的一种方法：

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