javascript - 在 React 和 CSS 中创建可点击、可重用的 NFL 字段组件

Question

我使用 css 创建了一个 NFL 字段。我正在尝试在 React 中实现一个点击界面，用户可以通过鼠标点击球场上的任何区域，然后检索该位置的特定码。

代码沙箱在这里

我面临几个问题：

1. 我不知道如何使该字段响应，以使其成为可重用的组件。理想情况下，我想使用react-bootstrap框架将此字段放置在列和行中，但我不确定如何调整 css 以使其正常工作。

2. 我正在使用 MouseEventsclientX并clientY精确定位球场上的确切坐标，因此我可以将它们映射到码。在我的笔记本电脑屏幕上，我已经能够在mapYardCoordinates功能中做到这一点。但是，分辨率或设备的任何更改都将导致这些 x 和 y 值变得不准确。我该如何克服这个问题？

标签： javascriptcssreactjsresponsive-designreact-bootstrap