如何将jQuery悬停函数转换为React

Question

我有一张美国的可挂图（每个状态在它悬停时会改变颜色）在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>
  )
}