画像を表示するにはホバーを反応させます。ホバーは動作していません

Question

まだリアクションを勉強しようとしています。私はホバーするときにイメージを表示しようとしています。これが私のItemコンポーネントです。

import React from 'react'; 


import Eyecon from '../../static/eye.svg'; 


class Item extends React.Component { 
    constructor(props) { 
     super(props); 
     this.displayName = 'Item'; 
     this.state = { 
      hover: false 
     }; 
    } 
    mouseOver() { 
     this.setState({hover: true}); 
    } 
    mouseOut() { 
     this.setState({hover: false}); 
    } 
    render() { 
     const { item, i } = this.props; 
     return (
      <div className="grid-box" onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}> 
      {this.state.hover ? (<img src={Eyecon}/>) : null}  
      </div> 
     ) 
    } 
} 


export default Item; 

私は上にカーソルを置いたアイテムだけが画像を表示するようにしますか？

Answer 1

これはちょうど「this」バインディングの問題です。 mouseOverメソッドとmouseOutメソッドの内部にconsole.logを入れて、あなたの状態が変化していないことに気づくでしょう。

あなたのクラスメソッドで 'this'コンテキストをバインドする方法はたくさんあります。この例では、3つの方法を示します（3つの方法すべてを実行せず、1つだけを選択してください）。 http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

Answer 2

あなたがそれらの内側this.setStateを使用するためにmouseOverとmouseOut通話をバインドする必要があるので多分それだ：ここでは

import React from 'react'; 
import Eyecon from '../../static/eye.svg'; 

class Item extends React.Component { 
    constructor(props) { 
     super(props); 
     this.displayName = 'Item'; 
     // 1. bind your functions in the constructor. 
     this.mouseOver = this.mouseOver.bind(this); 
     this.mouseOut = this.mouseOut.bind(this); 
     this.state = { 
      hover: false 
     }; 
    } 

    // 2. bind it with fat arrows. 
    mouseOver =() => { 
     this.setState({hover: true}); 
    } 
    mouseOut() { 
     this.setState({hover: false}); 
    } 
    render() { 
     const { item, i } = this.props; 
     // 3. bind them in the render method (not recommended for performance reasons) 
     return (
      <div className="grid-box" onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)}> 
      {this.state.hover ? (<img src={Eyecon}/>) : null}  
      </div> 
     ) 
    } 
} 


export default Item; 

はES6クラスを使用して反応してあなたの「この」文脈をバインドするさまざまな方法についての説明です。

置き換えますと

<div className="grid-box" onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}> 

：

<div className="grid-box" onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)}> 

Answer 3

を提案し、他のソリューションは、しかし、あなただけのES6 arrow functionsにあなたの機能を変換することによって、これを簡単に解決することができ、完全に有効です。そのよう

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous.

：

mouseOver =() => { 
    this.setState({hover: true}); 
} 
mouseOut =() => { 
    this.setState({hover: false}); 
} 

シンプル。