React 如何为 <area> 标签添加悬停边框

Question

目前我有图像地图，我正在绘制区域

例如

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

一旦我们将鼠标悬停在该区域上，如何在其周围添加边框。

以下代码在 Javascript 中运行良好，但我如何在 React.

中执行此操作

How to put border on <area>?

var areas = document.getElementsByTagName( 'area' );
for( var index = 0; index < areas.length; index++ ) {    
    areas[index].addEventListener( 'mouseover', function () {this.focus();}, false );
    areas[index].addEventListener( 'mouseout', function () {this.blur();}, false );
};

Answer 1

你可以在return之前写你的js代码。这是给你的例子

import React, { useEffect } from "react";

export default function Header() {
  useEffect(() => {
    function myFunction() {
      var areas = document.getElementsByTagName("area");
      for (var index = 0; index < areas.length; index++) {
        areas[index].addEventListener(
          "mouseover",
          function () {
            this.focus();
          },
          false
        );
        areas[index].addEventListener(
          "mouseout",
          function () {
            this.blur();
          },
          false
        );
      }
    }
    myFunction();
  }, []);

  return (
    <div>
      <img
        alt="img"
        id="map"
        src="http://thinkingstiff.com/images/matt.jpg"
        usemap="#map"
      />
      <map name="map">
        <area alt="area" shape="circle" coords="50,50,50" href="#" />
        <area alt="area" shape="circle" coords="100,100,50" href="#" />
      </map>
    </div>
  );
}

React 如何为 <area> 标签添加悬停边框

React How to add on hover border for <area> tag

html

javascript

css

area

reactjs