React.jsのホバー効果でイメージを非同期でロードするには？

Question

このタイプの効果を見たことがあります。例 - https://codepen.io/anon/pen/GEmOQy

しかし、私はReactで同じ方法を実装する必要があります。私はAJAXのためにcomponentDidMountメソッドを使用することができますが、物事はホバーの応答を表示する方法です。

私は:hoverで純粋なCSSのアプローチのように、反応でホバーを実装する練習がありませんでした。

どのような解決方法も歓迎します。

Answer 1

これは非常にフラットな質問であり、多くの可能性があります。私が与えることができるのは、それを行う方法の基本的な骨格です。
ImageCardのコンポーネントで、API呼び出しを行うcomponentDidMountを定義します。次に、あなたの親コンポーネント（whichevereコンポーネントのボタンがある）、カードを表示するかどうかを管理しstateキーを保管上：

class MyComponent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     showCard: false 
    }; 
    } 
    render() { 
    return (
     <div> 
     { 
      this.state.showCard && 
     <ImageCard/> 
     } 
     <button 
      onMouseEnter={() => this.setState({ showCard: true })} 
      onMouseLeave={() => this.setState({ showCard: false })} 
      >Hover Me!</button> 
     </div> 
    ) 
    } 
} 

Answer 2

使用onMouseEnterは、ボタンのイベントと、それは発射時に新しいイメージをロードし、

class SomeComp extends Component{ 
    coonstructor(){ 
     this.state = { 
      url: 'http://some-intial-url.com' 
     } 
     this.onMouseEnter = this.onMouseEnter.bind(this) 
    } 
    onMouseEnter(){ 
     this.setState({ 
      url: GetOtherImageURl() 
     }) 
    } 
    render(){ 
     <img src = {this.state.url} /> 
    } 
}