0
363
ViewsCómo manejar Autocompletar {onChange} en MUI v5 usando un enlace personalizado
Estoy usando un enlace personalizado que valida y maneja la función onChange.
No tengo problemas para manejar onChange para la mayoría de los componentes (entrada, selección, campo de texto); Estoy usando la siguiente sintaxis para manejar onChange, que funciona bien, excepto Autocompletar.
Ninguno Componentes de Autocompletar:
onChange = {handleInputChange} const handleInputChange = (e) => { const { name, value } = e.target; setValues({ ...values, [name]: value, }); if (validateOnChange) validate({ [name]: value }); }; Veamos el e.target 
Pero cuando se compara con Autocompletar, no se parece en nada a la captura de pantalla anterior. No puedo obtener el nombre o el valor para realizar un seguimiento correcto a través de setValues.
·
Juan Pablo Isaza
1 answers
Answer question0
Utilicé una función props:
const {onChange} = props; <Autocomplete onChange={(e, value) => onChange(value)}Si quieres verlo completo:
import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; import CircularProgress from '@mui/material/CircularProgress'; import {useRef} from "react"; export default function Asynchronous(props) { const {onChange, name, getListData, label = "name", id = "id", showName,defaultValue,disabled,required,value,noOption="No Option"} = props; const [open, setOpen] = React.useState(false); const [options, setOptions] = React.useState([]); const [filters, setFilters] = React.useState(null); const [loadingApi, setLoadingApi] = React.useState(false) const loading = open && options.length === 0; let timeOut = useRef(null); const getData = async (search = "") => { setLoadingApi(true) const data = await getListData(search); // For demo purposes. // console.log(data) setLoadingApi(false); // console.log(data) if(data) setOptions([...data]); } React.useEffect(() => { if (!loading) { return undefined; } getData(); }, [loading]); React.useEffect(() => { if (filters !== null) { if (timeOut.current !== null) clearTimeout(timeOut.current); timeOut.current = setTimeout(() => getData(filters), 500); } }, [filters]); React.useEffect(() => { if (!open) { setOptions([]); } }, [open]); return ( <Autocomplete disabled={disabled} id={name} name={name} sx={{width: "100%"}} open={open} onOpen={() => { setOpen(true); }} onClose={() => { setOpen(false); }} defaultValue={defaultValue} value={value} isOptionEqualToValue={(option, value) => option?.[id] === value?.[id]} getOptionLabel={(option) => option?.[label]} options={options} onChange={(e, value) => onChange(value)} loading={loadingApi} noOptionsText={noOption} renderInput={(params) => ( <TextField variant="standard" name={name} required={required} variant="standard" {...params} label={showName} onChange={(e) => setFilters(e.target.value)} InputProps={{ ...params.InputProps, onblur:() => {}, endAdornment: ( <React.Fragment> {loadingApi ? <CircularProgress color="inherit" size={20}/> : null} {params.InputProps.endAdornment} </React.Fragment> ), }} /> )} /> ); }
·
Juan Pablo Isaza
Report
Answer question