Как использовать Select Component в пользовательском интерфейсе материалов?

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

Компоненты выбора используются для сбора предоставленной пользователем информации из списка параметров. Материал UI для React имеет этот компонент, доступный для нас, и его очень легко интегрировать. Мы можем использовать Select Component в ReactJS, используя следующий подход:

Создание приложения React и установка модуля:

Шаг 1: Создайте приложение React с помощью следующей команды:

npx create-react-app foldername

Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды:

cd foldername

Шаг 3: После создания приложения ReactJS установите модули material-ui с помощью следующей команды:

npm install @mui/material

Структура проекта: Это будет выглядеть следующим образом.

Пример 1. В этом примере мы создадим простое приложение, использующее компонент Select для отображения раскрывающегося списка чисел, из которого пользователь может выбрать определенный номер. Обновите файл App.js, как показано ниже.

Имя файла: App.js:

Javascript

import { FormControl, InputLabel, MenuItem, Select } 
    from "@mui/material";
import React, { useState } from "react";
  
const App = () => {
  
    const [currentValue, setCurrentValue] = useState(1000)
  
    return (
        <div style={{
            margin: "auto",
            display: "block",
            width: "fit-content"
        }}>
            <h3>How to use Select Component in ReactJS?</h3>
            <FormControl>
                <InputLabel id="demo-simple-select-label">
                    Select Amount:
                </InputLabel>
                <Select
                    labelId="demo-simple-select-label"
                    value={currentValue}
                    style={{
                        width: 400,
                    }}
                    onChange={(e) => {
                        console.log("Current Value", e.target.value)
                        setCurrentValue(e.target.value)
                    }}
                >
                    <MenuItem value={1000}
                    >1000</MenuItem>
                    <MenuItem value={2000}
                    >2000</MenuItem>
                    <MenuItem value={3000}>3000</MenuItem>
                </Select>
            </FormControl>
        </div>
    );
}
  
export default App;

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Пример 2. В этом примере мы создадим простое приложение, использующее компонент Select для отображения раскрывающегося списка чисел, из которого пользователь может выбрать несколько чисел. Обновите файл App.js, как показано ниже.

Имя файла: App.js

Javascript

import { FormControl, InputLabel, MenuItem, Select } 
    from "@mui/material";
import React, { useState } from "react";
  
const App = () => {
  
    const [currentValue, setCurrentValue] = useState([])
  
    return (
        <div style={{
            margin: "auto",
            display: "block",
            width: "fit-content"
        }}>
            <h3>How to use Select Component in ReactJS?</h3>
            <FormControl>
                <InputLabel id="demo-simple-select-label">
                    Select Amount:
                </InputLabel>
                <Select
                    multiple
                    labelId="demo-simple-select-label"
                    value={currentValue}
                    style={{
                        width: 400,
                    }}
                    onChange={(e) => {
                        const {
                            target: { value },
                        } = e;
  
                        setCurrentValue(
  
                            // On autofill we get a 
                            // stringified value.
                            typeof value === "string" ? 
                                value.split(",") : value,
                        );
                    }}
                >
                    <MenuItem value={"1000"}
                    >1000</MenuItem>
                    <MenuItem value={"2000"}
                    >2000</MenuItem>
                    <MenuItem value={"3000"}>3000</MenuItem>
                </Select>
            </FormControl>
        </div>
    );
}
  
export default App;

Шаги для запуска приложения:

npm start

Выход:

Ссылка: https://mui.com/material-ui/react-select/#main-content

JavaScript

Как использовать Select Component в пользовательском интерфейсе материалов?

Javascript

Javascript

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