Javascript 如何在React.js中以异步方式加载悬停效果上的图像？

你可能已经看到了这种效果。示例-

---

但我需要以同样的方式在React中实现。我知道我可以使用ajax的

componentDidMount

方法，但问题是如何在悬停时显示响应

我没有使用react实现hover的实践，就像使用

：hover

的纯css方法一样

---

因此，欢迎任何解决方案

这是一个非常简单的问题，有很多可能性。我所能给出的只是一个如何做的基本框架。
定义一个

ImageCard

组件，在该组件中执行API调用。然后在父组件（按钮所在的每个组件）上存储一个管理是否显示卡的

状态

键：

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>
    )
  }
}

类MyComponent扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 展示卡：假 }; } 渲染（）{ 返回( { 这是我的名片&& } this.setState（{showCard:true}） onMouseLeave={（）=>this.setState（{showCard:false}） >让我停下来！ ) } }

---

使用按钮上的

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} />
   }
}

类SomeComp扩展组件{
协同构造器（）{
此.state={
网址：'http://some-intial-url.com'
}
this.onMouseEnter=this.onMouseEnter.bind（this）
}
onMouseEnter（）{
这是我的国家({
url:GetOtherImageURl（）
})
}
render（）{
}
}

对AJAX使用

componentDidMount

。请看“是”右侧更正！我试试这个。