/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/selects/MultipleSelectNative.tsx
59 строк
1 KB
Jan Potoms
[docs] Use `React.useId()` for demo IDs (#48300)
19 апр 2026, 13:10
Не верифицирован
19 апр 2026, 13:10
107f22c
Код
Авторство
О чём код?
import * as React from 'react'; import InputLabel from '@mui/material/InputLabel'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; const names = [ 'Oliver Hansen', 'Van Henry', 'April Tucker', 'Ralph Hubbard', 'Omar Alexander', 'Carlos Abbott', 'Miriam Wagner', 'Bradley Wilkerson', 'Virginia Andrews', 'Kelly Snyder', ]; export default function MultipleSelectNative() { const id = React.useId(); const [personName, setPersonName] = React.useState<string[]>([]); const handleChangeMultiple = (event: React.ChangeEvent<HTMLSelectElement>) => { const { options } = event.target; const value: string[] = []; for (let i = 0, l = options.length; i < l; i += 1) { if (options[i].selected) { value.push(options[i].value); } } setPersonName(value); }; return ( <div> <FormControl sx={{ m: 1, minWidth: 120, maxWidth: 300 }}> <InputLabel shrink htmlFor={`${id}-select`}> Native </InputLabel> <Select<string[]> multiple native value={personName} // @ts-ignore Typings are not considering `native` onChange={handleChangeMultiple} label="Native" inputProps={{ id: `${id}-select`, }} > {names.map((name) => ( <option key={name} value={name}> {name} </option> ))} </Select> </FormControl> </div> ); }