在按钮单击事件上调用 blazor 组件

问题描述

嗨，我有一个子组件位置网格，我想在父组件内单击按钮时调用这个组件

下面的父组件代码

 <div class="form-group col-md-3">
        <button class="btn btn-primary" @onclick="displayPositionRefGrid">
          Create
        </button>
    </div>
</div>


   <div class="form-row" id="divPositionRefGrid" hidden="@HideGrid">
       <div class="form-group col-md-12">
           <PositionRefGrid>

           </PositionRefGrid>

          
       </div>
   </div>

问题是子组件在加载父组件的同时加载，但我想在按钮单击方法“displayPositionRefGrid”上加载子组件

解决方法

使用布尔变量有条件地显示子组件。

<div class="form-group col-md-3">
        <button class="btn btn-primary" @onclick="DisplayPositionRefGrid">
          Create
        </button>
    </div>


@if (ShowGrid )
{
   <div class="form-row" id="divPositionRefGrid" hidden="@HideGrid">
       <div class="form-group col-md-12">
           <PositionRefGrid>

           </PositionRefGrid>

          
       </div>
   </div>
}

@code{

private bool ShowGrid {get;set;}

void DisplayPositionRefGrid()
{
  ShowGrid =true;

//other stuf
//...
}
}

Try it online