如何将 jQuery 悬停功能翻译成 React

Question

我有一个用 jQuery 编码的美国可悬停地图（每个州在悬停时都会改变颜色），它可以正常工作，但如果可能的话，我最终需要将整个东西改为在 React 中呈现，而且我我在翻译过程中遇到了一些问题...

$("path, circle").hover(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

还有其他三个类似的 jQuery 对象，但我想如果我能翻译这个，我就能找出其他的。

Answer 1

您可以使用onMouseEnteronMouseLeave事件来模拟hover事件监听器：

handleHover(e){
    // Do something here...
}
render(){
    return (
       <svg>
          <path onMouseEnter={this.handleHover} onMouseLeave={this.handleHover} />
          <circle onMouseEnter={this.handleHover} onMouseLeave={this.handleHover} />
       </svg>
  )
}