在for循环中使用@ref来获取元素引用

2023-11-24

我试图在不同的地方获取同一对象的位置,其中,使用 javascript 函数,我应该得到不同的顶部位置,但这不是场景。脚本代码:

<script type="text/javascript">
    window.ShowAlert = function myFunction(element) {   
    console.log("Hello World.");
    alert(element.offsetTop);
   }
</script>

Index.razor代码:

@inject IJSRuntime jsRuntime

<div>
    @for (int i = 0; i < 10; i++)
    {
        <div @onclick="MemberFunction" @ref="memberRef">Click Here</div>
    }

</div>

@code {

    private ElementReference memberRef;
    void MemberFunction()
    {
        jsRuntime.InvokeAsync<object>("ShowAlert", memberRef);
    }
}

正如你在这里看到的,我正在做一个for在同一个 div 中,他向下线。我想从中得到的是每一个div发布它应该给我一个不同的值offsetTop,因为他一条一条地走下去。我该如何解决这个问题?

为了更好地理解这里你有一个演示https://blazorfiddle.com/s/4g57o82k。正如您在演示中看到的每个值点击这里是一样的。

感谢您的关注。


Edit:

我相信这是一个错误,所以我创建了一个issue。如果这不是问题或得到解决,我会在这里更新。

看着有关 lambda 表达式的文档

不要使用循环变量 (i) in a for直接在 lambda 表达式中循环。否则,所有 lambda 表达式都使用相同的变量,导致i所有 lambda 中的值都相同。始终在局部变量中捕获其值(buttonNumber在前面的示例中),然后使用它。

所以看看这个问题和给出的答案我稍微调整了一下并设法让它工作。

您需要在内部定义一个新变量for保持价值i.

@inject IJSRuntime jsRuntime

<div>
    @for(var i = 0; i < memberRef.Count(); i++)
    {
        var i2 = i;
        <div @onclick="() => MemberFunction(i2)" @ref="memberRef[i2]">Click Here</div>
    }
</div>

@code {

    private ElementReference[] memberRef { get; set; } = new ElementReference[11];
    void MemberFunction(int i)
    {
        jsRuntime.InvokeAsync<object>("ShowAlert", memberRef[i]);
    }

}

这是一个工作fiddle.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在for循环中使用@ref来获取元素引用 的相关文章

  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • IronPython:没有名为 json 的模块

    我安装了 IronPython 我的 python 文件如下所示 import sys print sys version import json 运行它的代码 var p Python CreateEngine var scope p C
  • 如何识别 WPF 文本框中的 ValidationError 工具提示位置

    我添加了一个箭头来指示工具提示中的文本框 当文本框远离屏幕边缘时 这非常有效 但是当它靠近屏幕边缘时 工具提示位置发生变化 箭头显示在左侧 Here is the Image Correct as expected since TextBo
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 将数组排序为第一个最小值、第一个最大值、第二个最小值、第二个最大值等

    编写一个JS程序 返回一个数组 其中第一个元素是第一个最小值 第二个元素是第一个最大值 依此类推 该程序包含一个函数 该函数接受一个参数 一个数组 该函数根据要求返回数组 输入示例 array 2 4 7 1 3 8 9 预期输出 1 9
  • 即使手动设置显示环境变量后,WSL Ubuntu 也会显示“错误:无法打开显示”

    我在 WSL Ubuntu 上使用 g 我使用 git 克隆了 GLFW 存储库 使用了ccmake命令配置并生成二进制文件 然后使用make在 build 目录中最终创建 a文件 我安装了所有OpenGL相关的库 usr ld 我不记得我
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • 在 C 中使用 GNU automake 中的解析器

    我是 GNU autotools 的新手 在我的项目中使用了 lex 和 yacc 解析器 将它们作为 makefile am 中的源代码会产生以下错误 配置 in AC CHECK PROGS YACC bison yacc none i
  • 当我“绘制”线条时,如何将点平均分配到 LineRenderer 的宽度曲线?

    我正在使用线条渲染器创建一个 绘图 应用程序 现在我尝试使用线条渲染器上的宽度曲线启用笔压 问题在于 AnimationCurve 的 时间 值 水平轴 从 0 标准化为 1 因此我不能在每次添加位置时都在其末尾添加一个值 除非有一个我不知
  • 当前的 x86 架构是否支持非临时加载(来自“正常”内存)?

    我知道有关此主题的多个问题 但是 我没有看到任何明确的答案或任何基准测量 因此 我创建了一个处理两个整数数组的简单程序 第一个数组a非常大 64 MB 第二个数组b很小 无法放入 L1 缓存 程序迭代a并将其元素添加到相应的元素中b在模块化
  • 为什么拆箱枚举会产生奇怪的结果?

    考虑以下 Object box 5 int int int box int 5 int nullableInt box as int nullableInt 5 StringComparison enum StringComparison
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 使用 C# 从 DateTime 获取日期

    愚蠢的问题 给定日期时间中的日期 我知道它是星期二 例如我如何知道它的 tue 2 和 mon 1 等 Thanks 您正在寻找星期几 http msdn microsoft com en us library system datetim
  • WinRT 定时注销

    我正在开发一个 WinRT 应用程序 要求之一是应用程序应具有 定时注销 功能 这意味着在任何屏幕上 如果应用程序空闲了 10 分钟 应用程序应该注销并导航回主屏幕 显然 执行此操作的强力方法是在每个页面的每个网格上连接指针按下事件 并在触
  • Googletest:如何异步运行测试?

    考虑到一个包含数千个测试的大型项目 其中一些测试需要几分钟才能完成 如果按顺序执行 整套测试需要一个多小时才能完成 通过并行执行测试可以减少测试时间 据我所知 没有办法直接从 googletest mock 做到这一点 就像 async选项
  • 错误:无效使用不完整类型“类 Move”/未定义对 Move::NONE 的引用

    拜托 我不知道为什么这个简单的代码被拒绝 它给了我 2 个编译错误 请帮帮我 I use 代码 块 20 03 我的编译器是GNU GCC 移动 hpp class Move public Move Move int int public

随机推荐

  • 链接服务器性能和选项

    在工作中 我们有两台服务器 其中一台正在运行很多人使用的应用程序 该应用程序具有 SQL Server 2000 后端 我很长时间以来都可以自由地查询它 但无法向其中添加任何内容 例如存储过程或额外的表 这导致我们将第二个 SQL Serv
  • 为什么 std::reference_wrapper 在调用成员函数时不隐式转换为引用? [复制]

    这个问题在这里已经有答案了 我不明白为什么不能使用std reference wrapper像这样 include
  • 开发 iPhone 应用程序以在 iPad 上运行 - 自动设置 2x

    有没有一种方法可以以编程方式将 iPad 设置为在 iPhone 应用程序启动时以 2 倍的速度运行 但仍保持 iPhone 应用程序本机 我知道我可以为每个硬件平台创建 NIB 文件 但为了方便起见 我只是希望应用程序启动就像用户在 iP
  • Scheme 可以将列表扩展为参数吗?

    考虑到我有一个程序 plus x y 女巫正好需要两个参数 现在我还有一个列表 其中包含两个对象 例如 list 1 2 那么 如果有any将列表扩展为两个参数的神奇方法 我们有一个点概念版本 但是那个isn t我想要的是 我只是想扩展该列
  • 在 Eclipse 中打开 xml 文件时出现错误 [重复]

    这个问题在这里已经有答案了 在 Eclipse 中 当我打开具有相同数据的两个不同名称的 xml 文件 意味着 A 和 B 是 2 个 xml 文件 它们具有相同的数据 时 我在控制台中出现错误 我在控制台中收到以下错误 为什么会出现这个错
  • 如何将 buildapp 与 Quicklisp 结合使用

    我想使用 buildapp 来制作作为给出的curl lisp可执行文件example buildapp output lisp curl asdf path src clbuild systems load system drakma e
  • 自动发布回到 mvc 下拉列表中

    要求 我的视图页面上有一个下拉列表 显示供应商列表 从下拉列表中选择供应商后 页面将显示所选供应商的详细信息 默认情况下 我需要选择第一个供应商并显示其详细信息 我可以使用以下代码来完成此任务 问题 不知道如何实现自动回发 true在 MV
  • 我可以在一个 Web 应用程序中拥有两个 web.xml 文件吗?

    我可以拥有一个包含多个 web xml 文件的应用程序吗 并且两个应用程序可以有父子关系从而有两个web xml吗 对于低于 servlet 3 0 的版本 则不能 如果您使用的是 3 0 则有一个可能性 在 JSR 315 Java Se
  • Azure Powershell:获取服务的公共虚拟IP

    是否可以使用 powershell 获取 azure 服务的公共虚拟 IP VIP 一种方法是使用 Get AzureEndpoint 命令 Get AzureVM Name thevmname ServiceName theservice
  • 面向对象的c++ win32?

    我想创建自己的类来处理创建窗口和窗口过程 但我注意到窗口过程必须是静态的 我现在想知道是否可以使窗口过程面向对象 我读过一些关于面向对象窗口的教程 但它们总是使过程静态 那有什么用 任何有关如何解决此问题的链接或信息将不胜感激 thanks
  • 如何在数据库中存储图像的位置?

    我有一个颜色列表 其中包含我想要向特定用户显示的纹理 因此我需要加载特定用户拥有的颜色的图像 颜色的信息包含在 ObjecDTO 中 其中一个属性是其图像小路 我的问题是我应该如何在数据库中存储图像路径 是否有任何特殊规则 例如 由于数据库
  • Spring Batch“默认”上下文变量是什么?

    In the 春季批次步进范围文档 存在三个无法解释的 spring batch 上下文映射 jobParameters jobExecutionContext and stepExecutionContext Springsource示例
  • MVC 自定义路由中的多个级别

    我正在尝试构建自己的小cms 我创建了一个抽象 pageBase 类 由 Static Reviews Articles News 继承 每个都有自己的控制器方法 我的问题是我需要允许管理员定义他自己的自定义路径级别 例如 news loc
  • 从字符串中提取格式不一致的日期(日期解析,NLP)

    我有一个很大的文件列表 其中一些文件名中嵌入了日期 日期的格式不一致且通常不完整 例如 Aug06 Aug2006 August 2006 08 06 01 08 06 2006 011004 等 除此之外 某些文件名具有不相关的数字 看起
  • 多线程和多进程的性能差异

    几年前 在Windows环境下 我做了一些测试 让CPU计算密集型 内存访问密集型 I O访问密集型应用程序的多个实例运行 我开发了2个版本 一个是在多处理下运行 另一个是在多线程下运行 我发现多处理的性能要好得多 我在其他地方读过 但我不
  • window.history.back() 不起作用。

    我无法让它发挥作用 我已经尝试了很多年了 请帮我
  • 带有 AVAudioConverterInputBlock 的 AVAudioConverter 在处理后会出现音频断断续续的情况

    我正在尝试将音频缓冲区转换为不同的格式 并且我正在使用 AVAudioConverter 当您具有相同的采样率并且不需要使用 AVAudioConverterInputBlock 时 AVAudioConverter 会完成这项工作 但如果
  • 查找 CSS 未应用的规则

    我有一个很大的 CSS 样式表 大约 6500 行 有什么方法可以确定哪些规则不适用于给定页面 firefox 插件 Web 实用程序或其他东西 Thanks PD 使用 Firebug 我可以找到哪些规则适用 但我无法找到哪些规则不适用
  • 有人可以在休眠状态下向我解释一下@MapsId吗?

    有人可以向我解释一下吗 MapsId冬眠时 我很难理解它 如果能用一个例子来解释它 以及它最适用于哪种用例 那就太好了 这是一个很好的解释对象数据库 指定为 EmbeddedId 主键 EmbeddedId 主键内的属性或父实体的简单主键提
  • 在for循环中使用@ref来获取元素引用

    我试图在不同的地方获取同一对象的位置 其中 使用 javascript 函数 我应该得到不同的顶部位置 但这不是场景 脚本代码 Index razor代码 inject IJSRuntime jsRuntime div for int i