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

Question

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

父组件代码如下

 <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'

Answer 1

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

<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