Реагировать MUI Выберите ввод

Опубликовано: 21 Февраля, 2023

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/

Technical Scripter Picked

Реагировать MUI Выберите ввод

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ