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

Question

我有一张 U.S 的悬停地图。 （每个状态在悬停时都会改变颜色）在 jQuery 中编码，可以正常工作，但我最终需要在 React 中呈现整个东西，如果可能的话，我在使用时遇到了一些麻烦翻译过程...

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

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

Answer 1

您可以使用 onMouseEnter onMouseLeave 事件来模拟 hover 事件侦听器：

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