マウスの出入りイベントを同時にトリガーする

Question

<ドロワー
      アンカー=「左」
      className="引き出し領域を左に移動"
      バリアント = "永続的"
      open={true}
      PaperProps={{
        スタイル： {
          幅: "継承",
          背景: "#172B4D",
          背景画像: `linear-gradient(右へ、#172B4D 60% 、白 40%)`,
          境界線: "なし"、
          オーバーフローY: "非表示",
        }、
      }}
    >
      <ボックス>
        <ボックス>
          <ボックス>
            <Box className="listing" sx={{ width: "100%" }}>
              <List className="mp-0 wh-100 overflow-overlay">
                {メニュー&&
                  メニューの長さ > 0&&;
                  メニュー.マップ((項目, インデックス) => (
                    <ボックスキー={インデックス}>
                      <リストアイテム
                        ref={ポップオーバーアンカー}
                        className={`mp-0 NavigationList flex-start-center`}
                       ** onMouseEnter={(e) => {
                          setNestedArr([...item?.children]);
                          ポップオーバーエンター(e);
                          setAnchorEl(e?.currentTarget);
                        }}
                        onMouseLeave={(e) => {
                          PopoverLeave(e);
                        }}**
                        onClick={(e) => {
                            console.log(item,'parent_clicked')
                        }}
                      >
                        <リストアイテムテキスト>
                              <ボックス>
                                {micons[アイテム?.名前] ? (
                                  マイコン[アイテム?.名前]
                                ):(
                                  <Icon>{item?.icon_class}</Icon>
                                )}
                              </ボックス>
                              ＜タイポグラフィー＞
                                {項目名}
                              </タイポグラフィ>
                            </タイポグラフィ>
                          }
                        />
                      </ListItem>
                    </ボックス>
                  ))}
              </リスト>
            </ボックス>
          </ボックス>
        </ボックス>
        {開く&&入れ子になったArr.length ? (
          <ネストされたメニュー
            開く={開く}
            setOpen={(val) => setOpen(val)}
            アンカーEl={アンカーEl}
            nestedArr={nestedArr}lightBackground={lightBackground}
            セカンダリカラー={セカンダリカラー}
            ポップオーバーアンカー={ポップオーバーアンカー}
            PopoverEnter={popoverEnter}
            PopoverLeave={popoverLeave}
          />
        ） ： ヌル}
      </ボックス>
    </Drawer>

ページの左側にいくつかのメニューがあります (MUI ライブラリとmaterial-ui-nested-menu-item ライブラリを使用)。マウスを Listitems の上に置くと、メニューが表示されます。ネストされたメニューまたはサブメニューを使用し、マウスを離れるとメニューを閉じますが、私が直面している問題は、メニューの上にマウスを置いたときに同時に onMouseLeave イベントが発生するため、メニューが開かないことです。何が問題なのか分かりません。

Answer 1

あなたが説明した問題は、React でネストされた要素とマウス イベントを処理するときによく発生します。ネストされた要素があり、onMouseEnter イベントと onMouseLeave イベントを親要素にアタッチしている場合、マウスを子要素の上に移動すると、マウスがまだ親要素の範囲内にある場合でも、親要素の onMouseLeave イベントがトリガーされます。これは、マウスが親要素を「離れ」、子要素に「入った」ためです。

この問題を解決するには、onMouseEnter および onMouseLeave の代わりに onMouseOver および onMouseOut イベントを使用します。 onMouseOver イベントと onMouseOut イベントは同じようにバブルアップしないため、この問題を回避するのに役立ちます。