Question

for (let menuname of this.tabsdata[reqmenuitem]) {
   content.push(<Anchor className="toblack" onclick={this._fetchTabData(this)}>{menuname.name}</Anchor>);
}

此处_fetchTabData会在页面呈现时触发，请指导我如何将onclick侦听器正确附加到相应的数组元素

Answer 1

在你的情况下，你正在调用函数_fetchTabData（结果传递给onClick我假设你的函数返回undefined所以onClick你传递undefined ）但对于onClick，您应该传递对函数的引用。您可以使用arrow function或.bind

来执行此操作。

for (let menuname of this.tabsdata[reqmenuitem]) {
  content.push(
    <Anchor 
      className="toblack" 
      onClick={() => { this._fetchTabData(menuname) } }
    >
     {menuname.name}
    </Anchor>
  );
}

Answer 2

首先，将您的_fetchTabData实施更改为以下内容：

_fetchTabData(menuname) {
  return (event) => {
    // Do what you need
    console.log(menuname);
  };
},

然后，像这样称呼它

for (let menuname of this.tabsdata[reqmenuitem]) {
  content.push(<Anchor className="toblack" onclick={this._fetchTabData(menuname)}>{menuname.name}</Anchor>);
}

Answer 3

.getElementById('container').children ----使用parent的.children属性将元素放入数组中。
使用附加for()

.addEventListener(type,function)

使用所需操作

// PURE JS

<!DOCTYPE html>
<html>
<head>
<script>
click = {
    changecolor: (e)=>{
        e.target.style.color = "red";

    }   
};
init = ()=>{
    var childs = document.getElementById('container').children;
    for(var i=0; i < childs.length; i++){
        childs[i].addEventListener('click', click.changecolor);
    }
}
document.addEventListener('DOMContentLoaded', init);
</script>
</head>
<body>
    <div id="container">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

如何将onclick事件添加到元素数组中

3 个答案: