![](/img/trans.png)
[英]Is there a way to pass a variable as an argument in onClick handler function in an element? - React JS
[英]Pass contextual variable to onclick event handler as argument
*这是在for循环中更大的代码块内发生的。 有关整个循环,请参见发布结束。
我已经阅读了所有与该主题有关的帖子,但仍然迷失了方向。
我试图将一个onclick事件分配给一个复选框。 分配给onclick事件的函数需要有权访问在定义复选框(范围为idvariable)的范围内可用的变量。
var idvariable = parentChildList[i].children[j]["subjectid"];
var input = document.createElement("input");
input.type = "checkbox";
input.value = "";
input.onclick = function () {
return clicked(idvariable);
};
function clicked(id) {
alert(id);
};
我已经尝试了内联函数和命名函数的每种变体,但是我想不通如何让单击的函数访问idvariable。 在上面的示例中,该变量的值未定义。
或者,如果我以这种方式尝试:
var input = document.createElement("input");
input.type = "checkbox";
input.value = "";
var idvariable = parentChildList[i].children[j]["subjectid"];
input.onclick = function (idvariable) {
return clicked(idvariable);
};
function clicked(id) {
alert(id);
};
我收到一条警告,提示[object MouseEvent]。 与以下内容相同,在该内容中,我从分配给onclick事件的方法名称中删除了():
var idvariable = parentChildList[i].children[j]["subjectid"];
input.onclick = function () {
return clicked;
}(idvariable);
function clicked(id) {
return alert(id);
};
*整个循环:
for (var i = 0; i < parentChildList.length; i++) {
var row = table1.insertRow(-1);
var cell = row.insertCell(0);
cell.innerHTML =
"<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse" + i + "\">" + parentChildList[i]["title"] + "</a></h4>";
if (parentChildList[i].children.length > 0) {
var row2 = table1.insertRow(-1);
var cell2 = row2.insertCell(0);
var table2 = document.createElement("table");
table2.className = "collapse";
table2.id = "collapse" + i;
cell2.appendChild(table2);
for (var j = 0; j < parentChildList[i].children.length; j++) {
var row3 = table2.insertRow(-1);
var cell3 = row3.insertCell(0);
var div = document.createElement("div");
div.className = "checkbox";
var label = document.createElement("label");
label.innerText = parentChildList[i].children[j]["title"];
var input = document.createElement("input");
input.type = "checkbox";
input.value = "";
input.setAttribute('subj', idvariable);
var idvariable = parentChildList[i].children[j]["subjectid"];
alert(idvariable);
input.onclick = function () {
return clicked(this.getAttribute('subj'));
};
function clicked(id) {
return alert(id);
};
cell3.style.padding = "0px 0px 0px 10px";
cell3.style.fontsize = "x-small";
cell3.appendChild(div);
div.appendChild(label);
label.insertBefore(input, label.childNodes[0]);
}
}
}
onclick
处理程序接收Event
对象。 如果将处理程序附加为elem.onclick=handler
则该元素在处理程序内部可用this
。 所以这是解决方法。
var idvariable = parentChildList[i].children[j]["subjectid"];
var input = document.createElement("input");
input.type = "checkbox";
input.value = "";
input.setAttribute('data-subj', idvariable);
input.onclick = function () {
return clicked(this.getAttribute('data-subj'));
};
function clicked(id) {
alert(id);
};
您必须首先使用以下代码将复选框附加到某些现有元素。
var element = document.getElementById("one").appendChild(input);
然后,您可以使用以下类似方法获取父项...
var x = document.getElementById("someId").parentElement;
其中x将包含父元素。
此链接https://stackoverflow.com/a/9418326/886393涉及事件(自定义事件)中的自定义数据。 希望能有所帮助。
谢谢
帕拉斯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.