0
100
VistasSelección múltiple con opciones como matriz de objetos
Tengo el siguiente componente para seleccionar roles:
export const MultipleSelectChip = ({ options, label, error, onRolesUpdate, }: Props) => { const theme = useTheme(); const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]); const handleChipChange = ( event: SelectChangeEvent<typeof selectedOptions>, ) => { const { target: { value }, } = event; setSelectedOptions( // On autofill we get a the stringified value. typeof value === 'string' ? value.split(',') : value, ); }; return ( <div> <FormControl sx={{ m: 1, width: 300 }}> <InputLabel id="multiple-chip-label">{label}</InputLabel> <Select required labelId="multiple-chip-label" error={error} id="demo-multiple-chip" multiple value={selectedOptions} onChange={handleChipChange} input={<OutlinedInput id="select-multiple-chip" label={label} />} renderValue={(selected) => ( <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}> {selected.map((value) => ( <Chip key={value} label={value} /> ))} </Box> )} MenuProps={MenuProps} > {options.map((propOption) => ( <MenuItem key={propOption.id} value={propOption.name} style={getStyles(propOption, selectedOptions, theme)} > {propOption.name} </MenuItem> ))} </Select> <FormHelperText>Here's my helper text</FormHelperText> </FormControl> </div> ); };Para las opciones, tengo una matriz de objetos con identificación y nombre, la cuestión es que quiero usar los nombres para mostrar los chips y las identificaciones para pasarlas al componente principal para la solicitud de adición. No sé cómo obtener de ids, también.
Este es el ejemplo: https://codesandbox.io/s/6ry5y?file=/demo.tsx pero está usando una matriz de cadenas en lugar de una matriz de objetos.
Así es como se ven las 'opciones':
const rolesDummy: Role[] = [ { id: '61fb0f25-34aa-46c6-8683-093254223dcd', name: 'HR' }, { id: '949b9b1e-d3f8-45cb-a061-08da483bd486', name: 'Interviewer' }, { id: 'c09ae2d4-1335-4ef0-8d4b-ee9529796b52', name: 'Hiring Manager' }, ];Y necesito recuperar solo las identificaciones seleccionadas
¡Gracias!
1 Respuestas
Responde la pregunta0
Si pasa la opción como un objeto, puede representar cada MenuItem con option.id como key y option.name como etiqueta. El MenuItem se identifica mediante un id:
<Select {...}> {options.map((option) => ( <MenuItem key={option.id} value={option.id}> {option.name} </MenuItem> ))} </Select> Para mostrar el nombre en el Chip seleccionado. Use renderValue , pero solo le proporciona los valores seleccionados (matriz de option.id ), por lo que debe encontrar la opción para obtener el nombre:
renderValue={(selected) => { return ( <Box> {selected.map((value) => { const option = options.find((o) => o.id === value); return <Chip key={value} label={option.name} />; })} </Box> ); }} Ahora puede obtener una matriz de identificadores seleccionados agregando un controlador de change :
onChange={e => console.log(e.target.value)} 