0
247
ViewsEl valor predeterminado de Autocompletar no está definido en MUI v5
Configuré el prop defaultValue en el componente Autocomplete de MUI v5 pero el valor siempre está undefined .
Extracto de mi código
const cars = [ { label: "BMW", code: "Volkswagen" }, { label: "Benz", code: "Mercedes" } ]; ... const formik = useFormik({ initialValues: { car: "" }, onSubmit: (values) => {} }); ... <Autocomplete id="autocomplete" options={cars} getOptionLabel={(option) => `${option.code} - ${option.label}`} renderOption={(props, option) => ( <Box component="li" {...props}> {option.code} - {option.label} </Box> )} defaultValue={`${cars[0].code} - ${cars[0].label}`} onChange={(e, value) => { formik.setFieldValue("car", `${value.code} - ${value.name}`); }} renderInput={(params) => ( <TextField {...params} id="textField" name="cars" label="Cars" onChange={formik.handleChange} onBlur={formik.handleBlur} inputProps={{ ...params.inputProps, autoComplete: "new-password" }} /> )} />Creé un ejemplo de trabajo usando CodeSandbox . ¿Alguien podría ayudar?
·
Juan Pablo Isaza
2 answers
Answer question0
Obtuvo undefined-undefined porque ya ha descrito cómo debería verse la propiedad seleccionada aquí:
getOptionLabel={(option) => `${option.code} - ${option.label}`} Por lo tanto, debe pasar a la opción predeterminada un objeto donde es posible acceder al code y label los valores. Cambiar defaultValue={cars[0]} ayudará.
·
Juan Pablo Isaza
Report
0
solo puedes usar:
defaultValue={cars[0]} 
·
Juan Pablo Isaza
Report
Answer question