javascript - radix-ui/react-menubar: deschidere la trecerea mouse-ului?

Folosesc un Menubar de la radix-ui care funcționează bine! Menubar-ul se deschide folosind componenta Menubar.Trigger de la radix.

import * as Menubar from "@radix-ui/react-menubar";

<Menubar.Root
    onValueChange={(value) => {
        if (onOpenChange) onOpenChange(Boolean(value));
    }}
    >
  <Menubar.Menu>
    <div
      className={`relative inline-block idle`}
    >
    <IconV2 />
    </div>
    <Menubar.Trigger>
      <ChevronDown width={10} />
    </Menubar.Trigger>
    <Menubar.Portal>
      <Menubar.Content align="start">
        <Menubar.Item onClick={onClick}>
           Option 1
        </Menubar.Item>
        <Menubar.Item onClick={onClick}>
           Option 2
        </MenubarItem>
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar.Root>

Totuși, acesta nu este un component controlat - cum pot să-l deschid onHover pe declanșator?

Răspuns #1

Bună, iată soluția,

import { useState } from "react";
.........
const [open, setOpen] = useState(false);
..........
<Menubar.Root open={open} onOpenChange={setOpen}>
  <Menubar.Trigger onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
    <ChevronDown width={10} />
  </Menubar.Trigger>
........other code.......

Editat: Codul de mai sus are unele probleme, folosește acest lucru în schimb

import { useState } from "react";
..............other code........
const [open, setOpen] = useState(false);
.....
<div onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
        <Menubar.Root modal={false} open={open} onOpenChange={setOpen}>
            .......other code same as yours...
        </Menubar.Root>
    </div>
......other code.....