如何在 React 中检测图像地图中的区域标签 onClick答案

【问题标题】：How to detect area tag onClick in a Image Map in React如何在 React 中检测图像地图中的区域标签 onClick
【发布时间】：2018-07-25 19:21:44
【问题描述】：

我想检测图像不同部分的onClick 和onHover。

<img src={physicalimage} id="physicalimage" usemap="#image-map"/>
   <map name="image-map">
   <area target="" onClick={this.consoleMessage("bpleft")} alt="bpleft" title="bpleft"  coords="223,201,269,254" shape="rect" />
   <area target="" onClick={this.consoleMessage("bpright")} alt="bpright" title="bpright" coords="60,199,101,259" shape="rect" />
   <area target="" onClick={this.consoleMessage("heart")} alt="heartrate"  title="heartrate" coords="169,124,219,183" shape="rect" />
</map>

我使用 react 库来开发我的网站。我无法检测到onClick 事件。还有其他选择吗？

【问题讨论】：

你可以试试onClick={this.consoleMessage("bpleft").bind(this)}吗？
绑定它们，你可以这样做 onClick={()=> code} 或者（这个更好）onClick={method} and method=() => {code}
将它们绑定到需要的区域是这种情况下的最佳选择。
@Barbaros 这对我很有帮助。谢谢

标签： html image reactjs imagemap

【解决方案1】：

我自己目前也在做同样的事情，偶然发现了这个包：React Image Mapper

到目前为止，它似乎可以满足我的所有需求。希望将来对其他人有用。

【讨论】：

请问您有代码示例吗？我无法使链接（href）正常工作。

【解决方案2】：

我建议您使用具有 react-image-mapper 的所有功能和 extra 功能的维护库，例如 responsive

https://github.com/NishargShah/react-img-mapper

https://www.npmjs.com/package/react-img-mapper

【讨论】：