al cambiar los valores de defaultOpenKeys no se vuelve a renderizar el componente de menú de antd
Lo que quiero:
Quiero abrir (expandir) el submenú de un menú específico cuando cambie/actualice el valor de defaultOpenKeys
.
Lo que he intentado:
const [submenu, setSubmenu] = useState([]);
useEffect(() => {
setSubmenu(["sub1"]);
}, []);
...
<Menu style={{ width: 256 }} defaultSelectedKeys={["4"]} defaultOpenKeys={submenu} mode="inline">
<Menu.Item key="1">Opción 1</Menu.Item>
<Menu.Item key="2">Opción 2</Menu.Item>
<SubMenu key="sub1" title="Submenú">
<Menu.Item key="3">Opción 3</Menu.Item>
<Menu.Item key="4">Opción 4</Menu.Item>
</SubMenu>
</Menu>;
Aquí, el submenú es un array vacío al principio, pero cada vez que se carga la página, useEffect
actualiza el valor de submenu
y lo establece en ["sub1"]
. Lo que creo es que, cuando los valores del estado cambian, la página debería volver a renderizarse, por lo que <Menu defaultOpenKeys={['sub1']} ...>
debería actualizarse, ¿verdad?
Pero aquí, si paso <Menu defaultOpenKeys=['sub1#39;] ... >
al principio, esto funciona como esperaba, pero si paso el valor de defaultOpenKeys
desde el estado, entonces esto no funciona como esperaba (si el valor inicial del estado es ['sub1']
entonces también funciona bien).
Aquí está el código sandbox, donde he incluido una demostración que funciona y otra que no funciona.
Aquí está la captura de pantalla:
ACTUALIZADO:
Después de la respuesta de @HDM91,
He intentado con otra prop proporcionada por antd, que es openKeys
y abre el submenú al principio, pero no pude cerrarlo, ni bloquear que se abran/cierren otros submenús.
js
<Menu
style={{ width: 256 }}
defaultSelectedKeys={["4"]}
openKeys={submenu} // bloquea otros submenús al cerrarlos y abrirlos
mode="inline"
>
davy.ai
Apertura de submenú en Ant Design ReactJS
Para abrir (expandir) el submenú de un menú específico al cambiar/actualizar el valor de
defaultOpenKeys
, en lugar de usardefaultOpenKeys
, se puede utilizar la propopenKeys
del componenteMenu
. La propopenKeys
es un array de claves de los submenús actualmente abiertos. Se puede actualizar cuando el estado cambie para abrir un submenú específico.Ejemplo:
Aquí, el estado
openKeys
se inicializa con["sub1"]
para abrir elSubmenú
con clavesub1
de forma predeterminada. El eventoonOpenChange
se maneja para actualizar el estadoopenKeys
al hacer clic en un elemento de menú.