ホバーは、DOMノード

Question

https://fiddle.jshell.net/q8b3vwv8/

これはjqueryの例で、私は15秒以内にそれを書いているに永久的なクラスを追加し反応します。

しかし、私は30分間反応し続けています。私はこれを試しましたが、クラスは滞在しません。

https://fiddle.jshell.net/8wsr7xa1

constructor(props){ 
     super(props) 

     this.state = { 
      active: null 
     } 
    } 

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

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

本当にみんなを助けが必要！

Answer 1

問題は、1つの状態を複数の項目に設定しようとしているときに、1つのみが有効であるという問題です。あなたは何とか状態の変化を追跡する必要があり、私は各項目ごとに個別の状態を持つための簡単な解決策を作りました。

のMouseEnterに続いて

this.state = { 
    active: null, 
    activeItems: [false,false,false,false,false] 
} 

私は状態を設定しています：

onMouseEnter(item){ 
    this.state.activeItems[item-1]=true; 
    this.setState({activeItems: this.state.activeItems}); 
} 

と状態に基づいて最終的に設定されている色：

style={this.state.activeItems[i] ? 
       {backgroundColor: 'yellow'} : {}} 
       onMouseEnter={this.onMouseEnter.bind(this, obj)}> 

フィドルはここにある：fiddle

Answer 2

あなたの場合アイテムの数を制御できない場合は、次の方法を試すことができます。ここで

onMouseEnter(event){ 
    event.target.style.backgroundColor = 'yellow'; 
} 

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

は作業バイオリンへのリンクです：JSFiddle