primero permítanme decir que no soy un desarrollador de TS. Así que si hago una pregunta tonta, házmelo saber.
Estoy tratando de usar selección múltiple, básicamente necesito múltiples menús desplegables.
Comencé con la selección simple de material-ui y traté de desarrollarme hacia adelante.
Hago que funcione con una sola selección, mi problema es que no entiendo cómo agregar una nueva selección usando el evento onChange
type OnChangeValue = { locationNaming: unknown; }; interface ServerNamingDropdownProps { onChange(value: OnChangeValue): void; error?: boolean | undefined; initialValue?: string | undefined; } export const ServerNamingDropdown: React.FC<ServerNamingDropdownProps> = ({ onChange, error, initialValue = undefined, }) => { const [locationNamingSelected, setLocationNaming] = useState( initialValue ? initialValue : '', ); return ( <div> <FormControl sx={{ minWidth: 120 }}> <InputLabel id="demo-simple-select-label">Location</InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" value={locationNamingSelected || ''} label="Location" error={error} labelWidth={140} style={{ width: 300 }} onChange={e => { onChange({ locationNaming: e.target.value, }); setLocationNaming(e.target.value as string); }} > {location.map(item => ( <MenuItem value={item.abbreviation} key={item.key}> {item.name} </MenuItem> ))} </Select> </div> ); }; Tengo que agregar un nuevo menú desplegable para Departamento.
Entiendo que debería agregar a OnChangeValue el nombre del departmentNaming .
Pero no entiendo cómo administrar onChange .
Cualquier idea sería muy apreciada.
Gracias
React volverá a ejecutar su procesamiento cuando cambie su estado, es decir, cuando llame a setLocationNaming . La salida de la función de renderizado debería ser diferente en ese punto. Como dijo @ mstephen19, lo que devuelve su función puede estar condicionado a los accesorios o al estado . Aquí hay un boceto muy simple (no probado):
const MyConditionalRender = () => { const [showMoreContent, setShowMoreContent] = useState(false); return ( <div> <button onClick={() => setShowMoreContent(true)}>Show</button> {showMoreContent && ( <p>More Content, like an extra dropdown for the department.</p> )} </div> ); };Lea los documentos de Representación condicional que mstephen19 vinculó.