【React】Material-uiのpopoverを複数使いたい場合の手法について【備忘録】

  • 2021年12月13日
  • 2021年12月13日
  • React

ReactでMaterial-uiを使う際、Popoverに関してのエラーの解決法です。
公式サイトには乗っていなかったので、解決に時間がかかりました。
同じような悩みを抱える人が出てくると思うので、備忘録がてら残しておきます。

【React】Material-uiのpopoverを複数使いたい場合の手法について

まず、Material-uiのPopoverについては公式サイトのデモを参考にしてください。

https://mui.com/components/popover/

さて、このPopoverですが、デモ通りに使っていると1つの問題にあたります。
それが複数のpopoverを使用する場合です。
この場合、一つのpopoverの表示場所に複数のpopoverが重なる感じになります。

画像で例を表示すると、以下のような形ですね。

複数のpopoverを使用すると一つの場所に全てのpopoverが表示されてしまうんですよね。
これを避けるための方法の紹介です。
そもそもですが、popoverの構文は以下のようになっています。

複数開いてしまう原因の引数は、openにあります。

  • open:trueならpopoverを開く

デモではクリックをした際に、openをtrueにしてpopoverを表示しています。
上記の例ではセル1やセル2をクリックした際に、よくあるonClick関数でtrueにしているイメージですね。
これだと全てのpopoverが起動するのも仕組み的に分かりやすいと思います。

これを避けるために、openの構文を変更します

もっと具体的には、クリックをしたセルとポップオーバーをリンクさせます。
画像イメージとしては以下の通りです。

方法は色々ありますが、セルのidとpopoverのkey(配列展開を想定)をリンクさせます。
その上で、popoverの構文を以下のように書き換えます。

openの部分を変更しています。
openはtrueならば開くので、セルのidとpopoverのkeyが一致していればそのpopoverを開くようにしています。
idやkeyについては、作成したプログラムによって使い方が変わると思います。

idに関しては、ステート関数などを使用して管理しても良いですね。
いずれにせよ、open部分を少し変えるというのは覚えておいてください。