es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Autoclose=’outside’ no funciona con varios menús en react-bootstrap.

19 Jul, 2023 Programación

Tengo un menú desplegable con 2 posibles menús que pueden alcanzarse haciendo clic en algunos elementos del menú desplegable. Al agregar “autoClose=’outside'”, solucioné el problema de cierre intempestivo al hacer clic en cualquier lugar del menú principal desplegable. Pero como tengo otro menú, una vez que se muestra, la primera vez que lo abro, el “autoClose” realmente no funciona, en cambio, es como si nunca se hubiera establecido, cierra todo el menú desplegable, y cuando lo vuelvo a abrir, ingreso al menú secundario por la segunda vez, este ‘error’ no se produce nuevamente en este menú, pero ocurre cuando vuelvo al primero, etc.

Sospecho que es porque “autoClose” solo funciona en el menú seleccionado actualmente, en el ejemplo a continuación funciona con el menú “principal” y no en el menú “secundario” primero, como se describió anteriormente, cuando vuelvo a abrir el menú desplegable muestra directamente el menú “secundario”, funciona y una vez que vuelvo al menú “principal”, no lo hace.

Básicamente, este es el código que estoy ejecutando.

import {Dropdown} from 'react-bootstrap';
import {useState} from 'react';

const Mydropdown = (props) => {

    const [menu, setMenu] = useState('main');

    return(
    <>
        <dropdown autoclose='outside'>
        {
          menu==="main"
          &&
          (
            <>
              <dropdown.menu>
                <dropdown.item onclick="{()" ==""> setMenu("secondary")}>
                    Menú secundario
                </dropdown.item>
              </dropdown.menu>

          )
        }
        {
          menu==="secondary"
          &&
          (
            <>
              <dropdown.menu>
                <dropdown.item onclick="{()" ==""> setMenu("main")}>
                    Menú principal
                </dropdown.item>
              </dropdown.menu>

          )
        }
      </dropdown>

  );

}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para el problema de autoClose en React Bootstrap

    Según el fragmento de código, parece que el problema ocurre porque autoClose='outside' solo está funcionando para el menú seleccionado actualmente.
    Una posible solución es utilizar la propiedad show de Dropdown y manejar el comportamiento de autoClose manualmente.

    Aquí tienes un fragmento de código actualizado con algunos cambios:

    import {Dropdown} from 'react-bootstrap';
import {useState} from 'react';

const Mydropdown = (props) => {

  const [menu,setMenu] = useState('main');
  const [show, setShow] = useState(false);  // nuevo estado para controlar la visibilidad del dropdown

  return(
    <>
      <div onclick="{()" ==""> setShow(!show)}>  // div envolvente para alternar la visibilidad del dropdown
        Haz clic para mostrar el dropdown
      </div>
      <dropdown show="{show}" onclose="{()" ==""> setShow(false)}>

        {menu==="main" && (
          <>
            <dropdown.toggle variant="success" id="dropdown-basic">
              Menú principal
            </dropdown.toggle>
            <dropdown.menu>

              <dropdown.item onclick="{()" ==""> setMenu("secondary")}>
                Menú secundario
              </dropdown.item>

            </dropdown.menu>

        )}

        {menu==="secondary" && (
          <>
            <dropdown.toggle variant="success" id="dropdown-basic">
              Menú secundario
            </dropdown.toggle>
            <dropdown.menu>

              <dropdown.item onclick="{()" ==""> setMenu("main")}>
                Menú principal
              </dropdown.item>

            </dropdown.menu>

        )}

      </dropdown>

  );

}

    Aquí, he agregado un nuevo estado show para controlar la visibilidad del dropdown. En lugar de depender del comportamiento de autoClose, estoy manejando el evento onClose del componente Dropdown. Cada vez que se cierra el dropdown, establezco el estado show en falso.

    Para que esto funcione, he envuelto el componente Dropdown dentro de un div envolvente que alterna el estado show.

    Además, he utilizado un componente Dropdown.Toggle para mostrar el nombre del menú actual en el botón del dropdown.

    Con estos cambios, el problema de autoClose debería resolverse y el dropdown debería funcionar como se espera.

Comments are closed.