/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/selects/ControlledOpenSelect.tsx
51 строка
1 KB
Siriwat K
[docs] Migrate content to the new location (#30757)
04 фев 2022, 07:13
Не верифицирован
04 фев 2022, 07:13
27f1c28
Код
Авторство
О чём код?
import * as React from 'react'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import Select, { SelectChangeEvent } from '@mui/material/Select'; import Button from '@mui/material/Button'; export default function ControlledOpenSelect() { const [age, setAge] = React.useState<string | number>(''); const [open, setOpen] = React.useState(false); const handleChange = (event: SelectChangeEvent<typeof age>) => { setAge(event.target.value); }; const handleClose = () => { setOpen(false); }; const handleOpen = () => { setOpen(true); }; return ( <div> <Button sx={{ display: 'block', mt: 2 }} onClick={handleOpen}> Open the select </Button> <FormControl sx={{ m: 1, minWidth: 120 }}> <InputLabel id="demo-controlled-open-select-label">Age</InputLabel> <Select labelId="demo-controlled-open-select-label" id="demo-controlled-open-select" open={open} onClose={handleClose} onOpen={handleOpen} value={age} label="Age" onChange={handleChange} > <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> </FormControl> </div> ); }