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

【问题标题】：React How to add on hover border for <area> tagReact 如何为 <area> 标签添加悬停边框
【发布时间】：2021-12-02 12:54:11
【问题描述】：

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

例如

<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 );
};

【问题讨论】：

你可以使用 CSS 并为每个可悬停的区域分配一个类名/id 吗？您可以使用鼠标事件，但众所周知，它们不适合此用例，您应该努力使用 CSS。
@DrewReese 似乎 html 区域标签不是我们可以设置样式的视觉元素吗？
老实说我不知道，但它是一个 HTML 标签，它应该是可定位的。认为您可以为您的代码创建一个小型运行代码和框，我们可以在其中进行检查和调试？
@DrewReese 当然

标签： javascript html css reactjs area

【解决方案1】：

您可以在返回之前编写您的 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>
  );
}

【讨论】：