为位于 Blazor 子菜单中的 DOM 元素调用 JS 互操作函数

问题描述

我正在尝试调用一个 JS 函数，该函数在用户单击时通过 Blazor 中的 JS 互操作创建模态。问题是，该函数正在对 Blazor 子菜单内的 DOM 元素使用 onclick 事件。当该 DOM 元素位于侧面导航栏中的子菜单之外时，它工作正常。当我将该元素放入子菜单时，Blazor 抱怨它 cannot set property 'onclick' of null

这是我的导航栏 HTML 和 JS 互操作代码

@inject IJSRuntime JS;

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Test</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>

        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="()=>expandSubNav = !expandSubNav">
                <span class="oi oi-fork" aria-hidden="true"></span> AccountPage
            </NavLink>
            @if (expandSubNav)
            {
        <ul  class="nav flex-column" id="submenu">
            <li class="nav-item px-3">
                <a class="expand-menu" href="page">
                    <span>element1</span>
                </a>
            </li>
            <li class="nav-item px-3">
                <a class="expand-menu" href="page">
                    <span>element2</span>
                </a>
            </li>
            <li class="nav-item px-3">
                <a class="expand-menu" href="page">
                    <span>element3</span>
                </a>
            </li>
            <li class="nav-item px-3">
                <a class="expand-menu">
                   
                    <div   id="addBtn" ><span class="oi oi-plus" aria-hidden="true"></span> Add Element</div>
                    </a>
            </li>
      


        </ul>
            }
        </li>
       
        

    </ul>
</div>

<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <h1 class="modal-title">
            <b>Add Element Here</b>
        </h1>

        <input id="addelementtext" type="text" />
        <button id="add">Add</button>
        <button type="button" class="btn btn-defaultcloseissue" id="closebtn" data-dismiss="modal" onclick="">Close</button>



    </div>
</div>





    </div>
</div>
@code { private bool collapseNavMenu = true;
    private bool expandSubNav;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {


        if (firstRender)
        {
            
                await JS.InvokeVoidAsync("createModal");
            
        }
    }

}

我正在尝试将 onclick 与此 id 元素一起使用

<li class="nav-item px-3">
                <a class="expand-menu">
                   
                    <div   id="addBtn" ><span class="oi oi-plus" aria-hidden="true"></span> Add Element</div>
                    </a>
            </li>

它在它创建的子菜单内。当我把它放在子菜单外进入主导航菜单时，JS功能没有报错，而且工作正常。

我也试过这样做

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {


        if (firstRender)
        {
            if (expandSubNav)
            {
                await JS.InvokeVoidAsync("createModal");

            }
        }
    }

这会停止错误，但单击该元素没有任何作用。我该如何解决这个问题？我正在尝试研究 Blazor LifeCycle，因为我觉得这是一个渲染问题，但我很难理解我能做什么。

这里也是我试图调用的 JS 函数

window.createModal = function createModal() {
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("addBtn");
    var closebtn = document.getElementById("closebtn");


    // When the user clicks the button,open the modal
    btn.onclick = function () {
        modal.style.display = "block";
    }



    // When the user clicks anywhere outside of the modal,close it
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    closebtn.onclick = function (event) {

        modal.style.display = "none";
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）