Ввод списка передачи React MUI

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

React MUI — это библиотека пользовательского интерфейса, которая предоставляет полностью загруженные компоненты, привнося нашу собственную систему дизайна в наши готовые к производству компоненты. MUI — это библиотека пользовательского интерфейса, которая предоставляет предопределенные и настраиваемые компоненты React для более быстрой и простой веб-разработки. Эти компоненты Material-UI основаны на Material Design от Google.

В этой статье мы обсудим ввод списка передачи React MUI. Список передачи или челнок, который позволяет пользователю перемещать один или несколько элементов списка между списками.

Реагировать на реквизиты флажка MUI:

проверено: определяет, проверен ли компонент.
checkedIcon: обозначает значок, отображаемый при проверке компонента.
классы: обозначает стили, которые переопределяют стили по умолчанию.
цвет: обозначает цвет компонента.
defaultChecked: определяет, проверяется ли компонент по умолчанию.
disabled: определяет, отключен ли компонент.
disableRipple: определяет, отключен ли волновой эффект на компоненте.
значок: обозначает значок, отображаемый, когда компонент не отмечен.
id: обозначает идентификатор входного элемента.
неопределенный: определяет, находится ли компонент в неопределенном состоянии.
indeterminateIcon: обозначает значок, отображаемый, когда компонент находится в неопределенном состоянии.
inputProps: обозначает список атрибутов, применяемых к элементу ввода.
inputRef: обозначает ссылку, которая передается элементу ввода.
onChange: обозначает функцию обратного вызова, которая запускается при изменении состояния флажка.
required: определяет, требуется ли входной элемент.
size: Обозначает размер компонента.
sx: обозначает системную поддержку, которая позволяет определять системные переопределения, а также дополнительные стили CSS.
value: Обозначает значение компонента.

Реагируйте на реквизиты списка MUI:

Children: используется для установки содержимого компонента.
классы: это переопределяет существующие стили или добавляет новые стили к компоненту.
компонент: используется для доступа к корневому узлу.
плотности: если установлено значение true, отступы содержимого уменьшаются, а дочерние элементы кажутся ближе. Значение по умолчанию неверно.
disablePadding: если установлено значение true, вертикальное заполнение удаляется из списка. Значение по умолчанию неверно.
subheader: содержимое подзаголовка, часто это ListSubheader.
sx: системная поддержка позволяет определять системные переопределения, а также дополнительные стили CSS.

Реагировать на MUI ListItem Props:

классы: это переопределяет существующие стили или добавляет новые стили к компоненту.
alignItems: указывает свойство стиля align-items. Значение по умолчанию — центр.
autoFocus: если установлено значение true, элемент списка фокусируется во время первого монтирования.
дочерние элементы: содержимое компонента.
компонент: это компонент, используемый для корневого узла.
компоненты: это компоненты, используемые для каждого слота внутри InputBase.
componentProps: реквизиты, используемые для каждого слота внутри Input.
плотности: если установлено значение true, используется компактный вертикальный отступ, предназначенный для ввода с клавиатуры и мыши.
disabled: если установлено значение true, компонент отключен. По умолчанию установлено значение false.
disableGutters: если установлено значение true, левое и правое заполнение удаляются.
disablePadding: если установлено значение true, все отступы удаляются.
делитель: если установлено значение true, светлая рамка толщиной 1 пиксель добавляется к нижней части элемента списка.
вторичное действие: это элемент, который будет отображаться в конце списка.
selected: если установлено значение true, применяется выбранный стиль.
sx: Системная поддержка позволяет определять системные переопределения, а также дополнительные стили CSS.
button: если true, элемент списка является кнопкой. Свойства, предназначенные для ButtonBase, затем можно применить к ListItem.

Реквизит кнопки MUI:

Children: используется для установки содержимого кнопки.
классы: это переопределение или расширение стилей, применяемых к компоненту.
размер: используется для настройки размера кнопки.
disableElevation: это логическое значение, определяющее высоту кнопки.
fullWidth: это логическое значение, определяющее, покрывает ли оно всю ширину контейнера или нет.
disabled: это логическое значение для включения или отключения кнопки.
disableElevation: это логическое значение, включающее или отключающее приподнятый внешний вид кнопки.
disableFocusRipple: это логическое значение для включения или отключения эффекта пульсации фокуса клавиатуры.
startIcon: Элемент перед дочерними элементами.
endIcon: Элемент после дочерних элементов.
href: его URL-адрес для ссылки при нажатии кнопки.
цвет: это цвет компонента.
disableRipple: это логическое значение для отключения или включения волнового эффекта.

Создание проекта 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.

Javascript

import React from "react";
import Grid from "@mui/material/Grid";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
  
function not(a, b) {
    return a.filter((value) => b.indexOf(value) === -1);
}
  
function intersection(a, b) {
    return a.filter((value) => b.indexOf(value) !== -1);
}
function App() {
    const [checked, setChecked] = React.useState([]);
    const [left, setLeft] = React.useState([0, 1, 2]);
    const [right, setRight] = React.useState([3, 4, 5]);
  
    const leftChecked = intersection(checked, left);
    const rightChecked = intersection(checked, right);
  
    const handleToggle = (value) => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];
  
        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }
  
        setChecked(newChecked);
    };
  
    const handleAllRight = () => {
        setRight(right.concat(left));
        setLeft([]);
    };
  
    const handleCheckedRight = () => {
        setRight(right.concat(leftChecked));
        setLeft(not(left, leftChecked));
        setChecked(not(checked, leftChecked));
    };
  
    const handleCheckedLeft = () => {
        setLeft(left.concat(rightChecked));
        setRight(not(right, rightChecked));
        setChecked(not(checked, rightChecked));
    };
  
    const handleAllLeft = () => {
        setLeft(left.concat(right));
        setRight([]);
    };
  
    const customList = (items) => (
        <Paper sx={{ width: 200, height: 180, overflow: "auto" }}>
            <List dense component="div" role="list">
                {items.map((value) => {
                    const labelId = `transfer-list-item-${value}-label`;
  
                    return (
                        <ListItem
                            key={value}
                            role="listitem"
                            button
                            onClick={handleToggle(value)}
                        >
                            <ListItemIcon>
                                <Checkbox
                                    checked={checked.indexOf(value) 
                                        !== -1}
                                    tabIndex={-1}
                                    disableRipple
                                    color="success"
                                    inputProps={{
                                        "aria-labelledby": labelId,
                                    }}
                                />
                            </ListItemIcon>
                            <ListItemText id={labelId} primary=
                                {`Item ${value + 1}`} />
                        </ListItem>
                    );
                })}
                <ListItem />
            </List>
        </Paper>
    );
  
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Transfer List Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Grid container spacing={2} 
                    justifyContent="center" alignItems="center">
                    <Grid item>{customList(left)}</Grid>
                    <Grid item>
                        <Grid container direction="column"
                            alignItems="center">
                            <Button
                                sx={{ my: 0.5 }}
                                variant="contained"
                                color="success"
                                size="medium"
                                onClick={handleAllRight}
                                disabled={left.length === 0}
                                aria-label="move all right"
                            >
                                ≫
                            </Button>
                            <Button
                                sx={{ my: 0.5 }}
                                variant="outlined"
                                color="success"
                                size="medium"
                                onClick={handleCheckedRight}
                                disabled={leftChecked.length === 0}
                                aria-label="move selected right"
                            >
                                >
                            </Button>
                            <Button
                                sx={{ my: 0.5 }}
                                variant="outlined"
                                color="success"
                                size="medium"
                                onClick={handleCheckedLeft}
                                disabled={rightChecked.length === 0}
                                aria-label="move selected left"
                            >
                                <
                            </Button>
                            <Button
                                sx={{ my: 0.5 }}
                                variant="contained"
                                color="success"
                                size="medium"
                                onClick={handleAllLeft}
                                disabled={right.length === 0}
                                aria-label="move all left"
                            >
                                ≪
                            </Button>
                        </Grid>
                    </Grid>
                    <Grid item>{customList(right)}</Grid>
                </Grid>
            </div>
        </div>
    );
}
  
export default App;

Выход:

Пример 2. Пример ниже демонстрирует ввод списка переноса React MUI и отображает количество выбранных вариантов.

Javascript

import React from "react";
import Grid from "@mui/material/Grid";
import List from "@mui/material/List";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import Checkbox from "@mui/material/Checkbox";
import Button from "@mui/material/Button";
import Divider from "@mui/material/Divider";
  
function not(a, b) {
    return a.filter((value) => b.indexOf(value) === -1);
}
  
function intersection(a, b) {
    return a.filter((value) => b.indexOf(value) !== -1);
}
  
function union(a, b) {
    return [...a, ...not(b, a)];
}
  
  
function App() {
    const [checked, setChecked] = React.useState([]);
    const [left, setLeft] = React.useState([0, 1, 2]);
    const [right, setRight] = React.useState([3, 4, 5]);
  
    const leftChecked = intersection(checked, left);
    const rightChecked = intersection(checked, right);
  
    const handleToggle = (value) => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];
  
        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }
  
        setChecked(newChecked);
    };
  
    const numberOfChecked = (items) => 
        intersection(checked, items).length;
  
    const handleToggleAll = (items) => () => {
        if (numberOfChecked(items) === items.length) {
            setChecked(not(checked, items));
        } else {
            setChecked(union(checked, items));
        }
    };
  
  
    const handleCheckedRight = () => {
        setRight(right.concat(leftChecked));
        setLeft(not(left, leftChecked));
        setChecked(not(checked, leftChecked));
    };
  
    const handleCheckedLeft = () => {
        setLeft(left.concat(rightChecked));
        setRight(not(right, rightChecked));
        setChecked(not(checked, rightChecked));
    };
  
  
    const customList = (title, items) => (
        <Card>
            <CardHeader
                sx={{ px: 2, py: 1 }}
                avatar={
                    <Checkbox
            

                    
                                            Technical Scripter
                                            Picked
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИКоличество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023