ハンドラをリストの各項目にバインドするにはどうすればよいですか？

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

私の提案は、マップを使用してオブジェクトの配列を最初に定義することです。

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