在Blazor组件中使用Javascript addEventListener

Question

我有一个Blazor组件，它在服务器端呈现。我想在里面有一些可折叠的div。但是，由于代码是服务器渲染的，所以不会执行Javascript，因此这些部分不能折叠。

这是我的script.js文件中的代码：

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else if(window.matchMedia("(max-width:1440px)")){
// content.style.maxHeight = content.scrollHeight + "px";
content.style.maxHeight = "20vh";
} 
else {
content.style.maxHeight = "50vh";
}
});
}

这是我的main.cshtml文件：

<component type="typeof(Main)" render-mode="Server" />
<script src="~/js/script.js" type="text/javascript"></script>

最后是我的Main组件和可折叠部件：

@using Microsoft.AspNetCore.Components;
@using Microsoft.AspNetCore.Components.Web;
<div class="collapsible">
<label for="tutu">HEADER</label>
<div id="mybtn" class="btn-rch"></div>
</div>
<div class="tutu content flex-column">
<p>CONTENT HIDDEN IN COLLAPSE</p>
</div>
<div class="collapsible">
<label for="tutu">HEADER</label>
<div id="mybtn" class="btn-rch"></div>
</div>
<div class="tutu content flex-column">
<p>CONTENT HIDDEN IN COLLAPSE</p>
</div>
<div class="collapsible">
<label for="tutu">HEADER</label>
<div id="mybtn" class="btn-rch"></div>
</div>
<div class="tutu content flex-column">
<p>CONTENT HIDDEN IN COLLAPSE</p>
</div>
@code {
}

如果我使用render-mode="Static"而不是render-mode="Server"，它是有效的，但由于我的组件内部会有事件，这对我来说是不可能的。例如，使用JSInterop，我如何调用我的JS脚本来使我的div崩溃？

Answer 1

您可以在Blazor中完成所有这些操作。下面是一个简单的工作例子，我认为你正在努力实现什么。

这是一个可折叠的div组件。

折叠Div.剃须刀

<div @onclick="Collapse" style="cursor:pointer;" >
<h2>@Label</h2>
</div>
@if (!Collapsed)
{
<div>@ChildContent</div>
}
@code {
[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter] public RenderFragment Label { get; set; }
bool Collapsed;
void Collapse(MouseEventArgs e)
{
Collapsed = !Collapsed;
}
}

这是演示它的页面：

折叠剃刀

@page "/collapse"
<h3>Collapse Test Page</h3>
<CollapseDiv>
<Label>I'm Collapsible</Label>
<ChildContent>
I'm the collapsed content!
</ChildContent>
</CollapseDiv>
<br />
<br />
<CollapseDiv>
<Label>I'm Collapsible Too</Label>
<ChildContent>
More collapsed content!
</ChildContent>
</CollapseDiv>
@code {
}

这里的关键是：忘记用Javascript操作DOM，构建组件。

你应该能够采用这种方式来满足你的需求。