如何將onclick事件添加到元素數組

Question

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

在此_fetchTabData在頁面呈現后_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屬性將元素放入數組中。
使用附加了.addEventListener(type,function)的for()循環遍歷數組
定義具有所需動作的函數（click.changecolor）

//純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 個解決方案

解決方案1
0 已采納 2016-02-11 08:15:45

解決方案2
0 2016-02-11 08:18:39

解決方案3
-1 2016-02-11 08:22:42

如何將onclick事件添加到元素數組

問題描述

3 個解決方案

解決方案1 0 已采納 2016-02-11 08:15:45

解決方案2 0 2016-02-11 08:18:39

解決方案3 -1 2016-02-11 08:22:42

解決方案1
0 已采納 2016-02-11 08:15:45

解決方案2
0 2016-02-11 08:18:39

解決方案3
-1 2016-02-11 08:22:42