0
270
VistasMaterial-ui Autocompletar: agregue un valor a startAdornment
Tengo autocompletar con permiso de selección múltiple.
https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.jsEn el ejemplo tengo 3 opciones para ciudades. ¿Cómo puedo agregar manualmente valor agregado automático en TextField cuando se selecciona algo?
En otras palabras aquí:
renderInput={(params) => { console.log(params); return ( <TextField {...params} variant="outlined" label="Cities" placeholder="Enter cities" autoComplete="off" InputProps={{ ...params.InputProps, endAdornment: ( <React.Fragment> {params.InputProps.endAdornment} </React.Fragment> ) }} /> ); }}Quiero poder agregar a params.InputProps.startAdornment un valor antes de representar el campo de texto.
como cada objeto seleccionado parece ser un objeto muy complejo, ¿cómo puedo hacer esto manualmente (es demasiado complicado para presionar ())? Cualquier idea de cómo puedo agregar un objeto como este:
¿a mano?
1 Respuestas
Responde la pregunta0
el valor de startAdornment no está definido hasta que se elige un valor del menú desplegable/casilla de verificación. Por lo tanto, podría agregar la propiedad startAdornment a InputProps como se muestra a continuación,
import { Chip } from '@material-ui/core'; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles((theme) => ({ chip: { margin: theme.spacing(0.5, 0.25) } })); const classes = useStyles(); const handleDelete = (item) => () => {...}; renderInput={(params) => { console.log(params); return ( <TextField {...params} variant="outlined" label="Cities" placeholder="Enter cities" autoComplete="off" InputProps={{ ...params.InputProps, startAdornment: ( <Chip key={"manual"} tabIndex={-1} label={"manually added"} className={classes.chip} onDelete={handleDelete("blah")} deleteIcon // requires onDelete function to work /> ), endAdornment: ( <React.Fragment> {params.InputProps.endAdornment} </React.Fragment> ) }} /> ); }} 