• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

83
Views
Usando inputRef con useAutocomplete de MUI

¿Cómo puedo pasar "inputRef" a useAutocomplete de Material UI ?

Necesito asignar una referencia personalizada en la entrada, sin embargo, getInputProps() de useAutocomplete ya establece una referencia requerida.

He intentado varias cosas, como agregar la ref. Entonces mi otro código funcionará, pero useAutocomplete no funcionará, porque depende de que su propio accesorio "ref" esté configurado en la entrada.

Tampoco hay mucha documentación sobre useAutocomplete o las opciones disponibles, por lo que es difícil de depurar.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Podemos obtener la referencia de inpuRef mediante getInputProps().ref .

Por ejemplo, para usar la tecla de acceso directo ('control+q' enfoque y seleccionar el valor de entrada),
Utilicé el siguiente código. (Espero que a continuación sea útil para cualquiera que use useAutocompletar)

 import {useHotkeys} from 'react-hotkeys-hook'; ... const { getRootProps, getInputLabelProps, getInputProps, getListboxProps, getOptionProps, groupedOptions, value } = useAutocomplete({ id: 'use-autocomplete-demo', options: options, limit: 10, freeSolo: true, autoSelect: false, clearOnBlur: true, selectOnFocus: true, filterOptions: options => options, getOptionLabel: (option) => { if(typeof(option) === 'object'){ return `${option.artistName} ${option.songName}` } return option; } }); const inputRef = getInputProps().ref; useHotkeys('ctrl+q',() => { inputRef.current.focus() inputRef.current.select() }, [inputRef.current]); ... ... ... return ( <div> <div {...getRootProps()}> <Input onKeyDownCapture={handleKeyDown} onKeyPressCapture={handleKeyPressed} onFocus={handleFocus} placeholder="control + q" {...getInputProps()} /> </div> ....
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error