如何将处理程序绑定到列表中的每个项目？

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> 
 
})