如何將處理程序綁定到列表中的每個項目？

Question

實施例：

<ul> 
    <li name="one">1</li> 
    <li name="two">2</li> 
    <li name="three">3</li> 
    <li name="four">4</li> 
    <li name="five">5</li> 
    <li name="six">6</li> 
</ul> 

每個元素是需要規定 -

onMouseOver={() => this.hover(event.target.getAttribute('name'))} 
onMouseOut={() => this.hover(false)} 

有很多元素，是有可能沒有他們處方給每個元素指定這些處理程序？

Answer 1

我的建議是使用map，先定義你的數組對象。

const allData = [ 
 
    {key: 1, name:'one'}, 
 
    {key: 2, name:'two'}, 
 
    {key: 3, name:'three'}, 
 
    {key: 4, name:'four'} 
 
] 
 

 
allData.map((data) => { 
 
    <li 
 
    name=data.name 
 
    onMouseOver={() => this.hover(event.target.getAttribute('name'))} 
 
    onMouseOut={() => this.hover(false)} 
 
    > 
 
    data.key 
 
    </li> 
 
})