onMouseEnterの単一の要素に反応クラスを適用する

Question

クラスをDomノードに適用できませんでした。このコードでは、すべてのDOMノードにクラスが適用されます。

import { Component } from 'react'; 

export default class App extends Component { 
    constructor(props){ 
     super(props) 

     this.state = { 
      active: false 
     } 
    } 

    onMouseEnter(){ 
     this.setState({active:true}) 
    } 

    render(){ 
     const items = [1,2,3,4,5]; 
     return (
      <div> 
       {items.map((obj,i) => <div key={i} className={this.state.active ? 'active' : ''} onMouseEnter={this.onMouseEnter.bind(this)}>{obj}</div>)} 
      </div> 
     ); 
    } 
} 

ここで何が間違っていますか？また、どのようにonMouseLeaveを行うには？ this.setState({active:false})をfalseに設定するだけですか？

Answer 1

あなたは近づいています...あなたが望むのは、「アクティブインデックス」を割り当てるようなものです。あなたのonMouseEnter()機能は、アクティブな項目のインデックスを取るように変更することができ、このような

onMouseEnter(index){ 
    this.setState({active: index}) 
} 

そして、あなたの機能ではなく、次のようになりレンダリング：あなたはあなたが投稿の例では間違っていた

render(){ 
    const items = [1,2,3,4,5]; 
    return (
     <div> 
      {items.map((obj,i) => 
      <div key={i} className={this.state.active === i ? 'active' : ''} onMouseEnter={this.onMouseEnter.bind(this, i)}>{obj}</div>)} 
     </div> 
    ); 
} 

を事すべての項目にアクティブなクラスを適用したのではなく、リスト内のどの項目が実際にアクティブであるかを区別しません。私が持っていない

（あなたは私のマウスは、もは​​やアクティブな項目の上にマウスを移動されますが、それはまだ黄色で見ることができないとして）