反応すると、onMouseOverイベントは1つではなくリスト内のすべてのアイテムをトリガーします

Question

私はliのリスト内のホバリングボタンに問題があります。ホバーした後、1つのli項目ボタンがすべてのli項目に表示されます。コードの下のcodepenにリンクします。

const ItemView = (props) => { 
return <li 
onMouseOver={() => props.onMouseOver()} 
onMouseMove={() => props.onMouseOver()} 
onMouseLeave={() => props.onMouseLeave()} 
> 
    <div className="item__row"> 
     <h5>{props.name}</h5> 
     <h6>Age: {props.age}</h6> 
     <p>{props.strenght}/100</p> 


    {props.isHover ? props.children[0] : null} 


    </div> 
    {props.children[1]} 
</li> 

}

Codepen：https://codepen.io/dominik3246/pen/QqKzzp

Answer 1

あなたは、特定の要素が推移しているのを追跡する要素の配列を使用する必要があります。その後

constructor(){ 
    ... 
    this.state ={ 
    ... 
    isHover: [false, false, false, false, false], 
    ... 
    } 
} 

ような配列は、この

mouseOver(i) { 
    return() => { 
     if (this.state.isHover[i] === true) { 
     return this.state; 
     } 
     let isHover = [...this.state.isHover] 
     isHover[i] = true; 
     this.setState({ ...this.state, isHover }); 
    } 
    } 

のような項目のインデックスの範囲を含む関数を返すために、そしてisHoverとmouseOver小道具を渡すためにあなたのマウスオーバー機能を作るようにisHover状態変数を取りますItemViewこのように

{this.state.data.map((d, i) => { 
      return (
      <ItemView 
       key={d.id} 
       name={d.name} 
       strenght={d.strenght} 
       age={d.age} 
       onMouseOver={this.mouseOver(i)} 
       onMouseLeave={this.mouseExit} 
       isHover={this.state.isHover[i]} 
      > 
      ... 

ここにあなたのコードの実例があります：Link of example