Реагировать MUI Выберите ввод
React MUI — это библиотека пользовательского интерфейса, которая предоставляет полностью загруженные компоненты, привнося нашу собственную систему дизайна в наши готовые к производству компоненты. MUI — это библиотека пользовательского интерфейса, которая предоставляет предопределенные и настраиваемые компоненты React для более быстрой и простой веб-разработки. Эти компоненты Material-UI основаны на Material Design от Google.
В этой статье мы обсудим React MUI Select Input. Компонент выбора используется для сбора предоставленных пользователем данных из списка параметров.
React MUI Выберите входные реквизиты:
- autowidth: если это правда, ширина всплывающего окна будет автоматически установлена в соответствии с элементами внутри меню, в противном случае это будет как минимум ширина выбранного ввода.
- Children: обозначает элементы <option>, которые представляют элементы в списке выбора.
- классы: обозначает стили, которые переопределяют стили по умолчанию.
- defaultOpen: обозначает, что компонент изначально открыт.
- defaultValue: обозначает значение по умолчанию.
- displayEmpty: если true, значение отображается, даже если элементы не выбраны.
- IconComponent: обозначает значок, отображающий стрелку в компоненте NativeSelect.
- id: обозначает идентификатор элемента-оболочки.
- ввод: обозначает элемент ввода, не обязательно относящийся к компоненту ввода MUI.
- inputProps: обозначает атрибуты, применяемые к компоненту NativeSelect.
- метка: обозначает метку выбора.
- labelId: обозначает идентификатор элемента, который действует как дополнительная метка.
- MenuProps: обозначает свойства, связанные с элементом меню.
- Multiple: если true, значение должно быть массивом, и меню будет поддерживать множественный выбор.
- native: это означает, что если это правда, компонент использует собственный элемент выбора.
- onChange: обозначает функцию обратного вызова, которая запускается при изменении активного элемента.
- onClose: Обозначает обратный вызов, запускаемый, когда компонент запрашивает закрытие.
- onOpen: Обозначает обратный вызов, запускаемый, когда компонент запрашивает открытие.
- renderValue: визуализирует выбранное значение.
- sx: обозначает системную поддержку, которая позволяет определять системные переопределения и дополнительные стили CSS.
- значение: обозначает входное значение.
- вариант: обозначает вариант, используемый для NativeSelect.
Реагировать на реквизиты MUI NativeSelect:
- Children: обозначает элементы <option>, которые представляют элементы в списке выбора.
- классы: обозначает стили, которые переопределяют стили по умолчанию.
- IconComponent: обозначает значок, отображающий стрелку в компоненте NativeSelect.
- ввод: обозначает элемент ввода, не обязательно относящийся к компоненту ввода MUI.
- inputProps: обозначает атрибуты, применяемые к компоненту NativeSelect.
- onChange: обозначает функцию обратного вызова, которая запускается при изменении активного элемента.
- sx: обозначает системную поддержку, которая позволяет определять системные переопределения и дополнительные стили CSS.
- значение: обозначает входное значение.
- вариант: обозначает вариант, используемый для NativeSelect.
Создание проекта React:
Шаг 1: Чтобы создать реагирующее приложение, вам необходимо установить реагирующие модули с помощью команды npm.
npm create-react-app project name
Шаг 2: После создания проекта реакции перейдите в папку для выполнения различных операций.
cd project name
Шаг 3: После создания приложения ReactJS установите необходимый модуль с помощью следующей команды:
npm install @mui/material @emotion/react @emotion/styled
Структура проекта:
Шаг для запуска приложения:
npm start
Пример 1: пример ниже демонстрирует ввод React MUI Select.
Javascript
import React from "react" ; import InputLabel from "@mui/material/InputLabel" ; import MenuItem from "@mui/material/MenuItem" ; import FormControl from "@mui/material/FormControl" ; import Select from "@mui/material/Select" ; function App() { const [algorithm, setAlgorithm] = React.useState( "" ); const handleChange = (event) => { setAlgorithm(event.target.value); }; return ( <div> <div style={{ textAlign: "center" , color: "green" }}> <h1>GeeksforGeeks</h1> <h2>React MUI Select Input</h2> </div> <div style={{ textAlign: "center" }}> <FormControl sx={{ m: 1, minWidth: 200 }}> <InputLabel id= "demo-simple-select-label" > Algorithm </InputLabel> <Select labelId= "demo-simple-select-label" id= "demo-simple-select" value={algorithm} label= "Algorithm" onChange={handleChange} > <MenuItem value={1}>Stack</MenuItem> <MenuItem value={2}>Queue</MenuItem> <MenuItem value={3}>Array</MenuItem> </Select> </FormControl> </div> </div> ); } export default App; |
Выход:
Пример 2. В приведенном ниже примере показан ввод множественного выбора React MUI в виде чипа.
Javascript
import React from "react" ; import OutlinedInput from "@mui/material/OutlinedInput" ; import InputLabel from "@mui/material/InputLabel" ; import { useTheme } from "@mui/material/styles" ; import FormControl from "@mui/material/FormControl" ; import Select from "@mui/material/Select" ; import Chip from "@mui/material/Chip" ; import { Box } from "@mui/system" ; import { MenuItem } from "@mui/material" ; const ITEM_HEIGHT = 45; const ITEM_PADDING_TOP = 5; const MenuProps = { PaperProps: { style: { maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, width: 250, }, }, }; const names = [ "Stack" , "Queue" , "Array" ]; function getStyles(algo, algorithm, theme) { return { fontWeight: algorithm.indexOf(algo) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium, }; } function App() { const theme = useTheme(); const [algorithm, setAlgorithm] = React.useState([]); const handleChange = (event) => { const { target: { value }, } = event; setAlgorithm( typeof value === "string" ? value.split( "," ) : value, ); }; return ( <div> <div style={{ textAlign: "center" , color: "green" }}> <h1>GeeksforGeeks</h1> <h2>React MUI Select Input</h2> </div> <div style={{ textAlign: "center" }}> <FormControl sx={{ m: 1, width: 300 }}> <InputLabel id= "demo-multiple-chip-label" > Algorithm </InputLabel> <Select labelId= "demo-multiple-chip-label" multiple value={algorithm} onChange={handleChange} input={<OutlinedInput id= "select-multiple-chip" label= "Algorithm" />} renderValue={(selected) => ( <Box sx={{ display: "flex" , flexWrap: "wrap" , gap: 0.5 }}> {selected.map((value) => ( <Chip key={value} label={value} /> ))} </Box> )} MenuProps={MenuProps} > {names.map((algo) => ( <MenuItem key={algo} value={algo} style={getStyles(algo, algorithm, theme)} > {algo} </MenuItem> ))} </Select> </FormControl> </div> </div> ); } export default App; |
Выход:
Ссылка: https://mui.com/material-ui/react-select/