Как перевести функцию наведения 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>
  )
}