/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/selects/MultipleSelectNative.js
59 строк
1 KB
code-infra-renovate[bot]
Bump prettier to v3.9.5 (#48808)
15 июл 2026, 13:03
Не верифицирован
15 июл 2026, 13:03
85eaf79
Код
Авторство
О чём код?
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([]); const handleChangeMultiple = (event) => { const { options } = event.target; const value = []; 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 multiple native value={personName} onChange={handleChangeMultiple} label="Native" inputProps={{ id: `${id}-select`, }} > {names.map((name) => ( <option key={name} value={name}> {name} </option> ))} </Select> </FormControl> </div> ); }