Google地图上的多个Poppers显示仅当前的OnClick

Question

大家好，我想在点击时打开一个Popper。我很惊讶，React Material网站上没有这样的例子。现在，我正在尝试使用自己的popper渲染多个标记。但是，所有的弹出窗口都在打开onClick，这是我的代码。 PS：我将在下面附上一张图片，以详细说明我的问题。

val x = ...
...
take(5)

sc.parallelize(x).saveAsTextFile("path")

这是一张图片，反映出无论我在Goggle Maps上单击什么标记，我总是得到相同的弹出器。谁能给我一些例子，一次只显示一个例子。

Answer 1

您是否注意到自己在id中使用了参数handleClick，但没有使用它？

您正在创建Popper组件的数组。每一个都依赖于相同的state.open打开和同一个state.anchorEl徘徊。因此，每当您单击一个标记时，所有标记都会弹出，并且您会看到最后一个标记。每次最后一个停留在最上方时，都会感觉只有一个弹出。

您可以采取哪些措施解决此问题： 将anchorEl，open，placement分别设为一个数组：

state = {
  anchorEl: [],
  open: [],
  placement: [],
  // ...
}

现在根据事件的状态和索引渲染Poppers：

<Popper
  id={index}
  key={index}
  open={open[index] || false}           // use index to find out this one's open-closed state, defaults to false
  anchorEl={anchorEl[index] || null}    // use index to find out it's achor, defaults to null
  placement={placement[index] || 'top'} // use index to find out it's placement, defaults to 'top'
  transition
>
...
</Popper>

还利用您发送到id的{​​{1}}：

handleClick