0
681
ViewsObtener el valor en React material-UI Autocompletar
Me refiero a la documentación de React Material-UI ( https://material-ui.com/components/autocomplete/ ).
En el código de demostración,
<Autocomplete options={top100Films} getOptionLabel={(option: FilmOptionType) => option.title} style={{ width: 300 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" fullWidth /> )} />Entiendo cómo funciona, pero no estoy seguro de cómo se supone que debo obtener el valor seleccionado.
Por ejemplo, quiero usar el accesorio onChange para esto para poder realizar algunas acciones basadas en la selección.
Intenté agregar onChange={v => console.log(v)}
pero la v no muestra nada relacionado con el valor seleccionado.
3 answers
Answer question0
Resuelto al pasar el (event, value) a los accesorios onChange .
<Autocomplete onChange={(event, value) => console.log(value)} // prints the selected value renderInput={params => ( <TextField {...params} label="Label" variant="outlined" fullWidth /> )} />0
El accesorio onChange funciona para múltiples valores de autocompletar (@Steve Angello @ShwetaJ). El value devuelto es una lista de todas las opciones seleccionadas.
const [selectedOptions, setSelectedOptions] = useState([]); const handleChange = (event, value) => setSelectedOptions(value); const handleSubmit = () => console.log(selectedOptions); . . . <Autocomplete multiple autoHighlight id="tags-outlined" options={top100Films} getOptionLabel={(option) => option.title} onChange={handleChange} filterSelectedOptions renderInput={(params) => ( <TextField {...params} variant="standard" /> )} /> . . . <button onClick={handleSubmit}>Submit!</button>0
Aquí está el ejemplo de trabajo de TS
const tags = ["perimeter", "Algebra", "equation", "square root"]; const handleInput = (e: React.SyntheticEvent, value: string[]) => { console.log(value); }; <Autocomplete multiple options={tags} onChange={handleInput} renderTags={(value: readonly string[], getTagProps) => value.map((option: string, index: number) => ( <Chip variant="outlined" label={option} {...getTagProps({ index })} /> )) } renderInput={(params) => ( <TextField {...params} variant="filled" label="Tags" placeholder="select question tags" /> )} />============ Salida ===============
