0
322
ViewsReact MUI: personalización del componente Autocompletar por rederInput
Tengo un componente React MUI Autocompletar como el del documento oficial.
El siguiente es el ejemplo para los países.
import * as React from 'react'; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; export default function CountrySelect() { return ( <Autocomplete id="country-select-demo" sx={{ width: 300 }} options={countries} autoHighlight getOptionLabel={(option) => option.label} renderOption={(props, option) => ( <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}> <img loading="lazy" width="20" src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`} srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`} alt="" /> {option.label} ({option.code}) +{option.phone} </Box> )} renderInput={(params) => ( <TextField {...params} label="Choose a country" inputProps={{ ...params.inputProps, autoComplete: 'new-password', // disable autocomplete and autofill }} /> )} /> ); } // From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js const countries = [ { code: 'AD', label: 'Andorra', phone: '376' }, .......... .......... { code: 'AE', label: 'United Arab Emirates', phone: '971', }, ]; 
Durante la selección, el componente muestra una lista de países junto con alguna información y el icono de la bandera correspondiente.
Después de elegir un país, el nombre del país se muestra en el campo de texto.
Por lo que entendí de esta publicación , es posible manipular la propiedad renderInput para personalizar la apariencia final del componente, en este ejemplo, TextField.
¿Hay alguna forma de mostrar también la bandera cerca del nombre del país seleccionado?
1 answers
Answer question0
Para mostrar el ícono de una opción seleccionada, debe agregar start startAdornment a InputProps del componente TextField . Este accesorio es responsable de representar el ícono antes del texto de la opción seleccionada. Luego podemos pasar la propiedad de una opción seleccionada a startAdornment para mostrar el icono de la opción seleccionada:
<Autocomplete value={value} onChange={(event, newValue) => { setValue(newValue); }} renderInput={(params) => { return ( <TextField {...params} label="Choose a country" inputProps={{ ...params.inputProps, autoComplete: "new-password" }} InputProps={{ ...params.InputProps, startAdornment: value ? ( <InputAdornment position="start"> <img loading="lazy" width="20" src={`https://flagcdn.com/w20/${value.code.toLowerCase()}.png`} srcSet={`https://flagcdn.com/w40/${value.code.toLowerCase()}.png 2x`} alt="" /> </InputAdornment> ) : null }} /> ); }} ... other props