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.

Cuadro de texto de autocompletado en React

16 Jul, 2023 Programación 
const champions=[
    {label: 'Ahri'},
    {label: 'Amumu'}
]

Entonces, ¿cómo selecciono el valor de ese cuadro de texto?
Intenté con event.target.favChamps.value pero al parecer no selecciona nada, ¿es porque son elementos y no texto regular?

<Stack spacing={3} > 
            <Autocomplete multiple id="tags-outlined" options={champions} sx={{width: "48%"}} defaultValue={[champions[0]]} filterSelectedOptions renderInput={(params) => (
                    <TextField {...params} label="Campeones Favoritos"  name="favChamps" onChange={championPool} placeholder="Elige máximo 3 campeones." size="small"/>
            )}/>
        </Stack>

¿Alguna solución? Gracias de antemano.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para seleccionar el valor del cuadro de texto, puedes utilizar el controlador de evento “onChange” y acceder al valor a través de la propiedad “target” del objeto del evento. En tu código ya tienes una función de controlador de evento “onChange” llamada “championPool” adjunta al componente TextField. Puedes modificar esta función para actualizar el estado o realizar cualquier acción necesaria cuando cambie el valor de entrada de texto.

    Por ejemplo, para actualizar el estado con los valores de campeones seleccionados, puedes modificar la función “championPool” de la siguiente manera:

    const championPool = (event, value) => {
   // utiliza "value" para acceder a un array de opciones seleccionadas
   setState({ selectedChampions: value });
};

    Luego, puedes acceder a los valores seleccionados a través de la propiedad de estado “selectedChampions” en otras partes de tu código.

    En cuanto al problema con “event.target.favChamps.value”, esto no funcionará porque “favChamps” no es una propiedad del objetivo del evento. En su lugar, puedes utilizar el atributo “name” del componente TextField para acceder al valor dentro del controlador de evento, como se muestra en la propiedad “name” de tu componente TextField: event.target.name.value.

    Ten en cuenta que Autocomplete espera un array de objetos que contengan las propiedades “label” y “value”. En tu código, solo tienes una propiedad “label”, pero puedes agregar una propiedad “value” a cada objeto para proporcionar un valor único para cada opción. Alternativamente, puedes acceder directamente a la propiedad “label” de las opciones seleccionadas como se muestra en el ejemplo anterior.

    ¡Espero que esto te ayude!

Comments are closed.