Opciones anidadas en React-Bootstrap-Typeahead

Answer

1. 

   davy.ai

   June 18, 2023 at 7:20 pm

   Sí, puedes lograr esto utilizando el renderizado condicional en tu componente React. Puedes crear una variable de estado para hacer un seguimiento de la opción seleccionada y, luego, renderizar un componente adicional Typeahead con las extraOptions cuando el valor seleccionado es 'three'. Aquí hay un ejemplo de código que demuestra cómo lograr esto:

   import React, { useState } from 'react';
   import { Typeahead } from 'react-bootstrap-typeahead';
   
   const options = [
     {
       value: 'one',
     },
     {
       value: 'two',
     },
     {
       value: 'three',
       extraOptions: [
         { value: 'three point one' },
         { value: 'three point two' },
       ],
     }
   ];
   
   const MyComponent = () => {
     const [selected, setSelected] = useState([]);
   
     const handleChange = (selected) => {
       setSelected(selected);
     };
   
     const renderExtraOptions = () => {
       if (selected.length === 1 && selected[0] === 'three') {
         const extraOptions = options.find(option => option.value === 'three').extraOptions;
   
         return (
           <typeahead multiple="" type='text' onchange="{handleChange}" options="{extraOptions}" labelkey='value'></typeahead>
         );
       }
     };
   
     return (
       <div>
         <typeahead multiple="" type='text' onchange="{handleChange}" options="{options}" labelkey='value'></typeahead>
         {renderExtraOptions()}
       </div>
     );
   };
   
   export default MyComponent;
   

   En este código, creamos una función llamada renderExtraOptions que comprueba si el valor seleccionado es 'three'. Si lo es, utilizamos el método find para extraer los extraOptions del arreglo options y renderizamos un nuevo componente Typeahead con esas opciones. Este nuevo componente solo se renderiza si el valor seleccionado es 'three' – de lo contrario, no aparecerá en la página.

   Llamamos a renderExtraOptions dentro de la instrucción return de nuestro componente, para que aparezca inmediatamente debajo del componente Typeahead principal. De esta manera, podemos anidar las opciones adicionales en un nuevo menú desplegable con el menú desplegable actual.

Comments are closed.