React MUI转移列表输入

React MUI是一个UI库，提供了功能齐全的组件，将我们自己的设计系统引入我们的生产就绪组件。MUI是一个用户界面库，提供预定义和可自定义的React组件，用于更快速和简便的Web开发，这些Material-UI组件基于谷歌的Material Design。

在本文中，我们将讨论React MUI转移列表输入。转移列表或穿梭框允许用户在列表间移动一个或多个列表项。

React MUI Checkbox Props：

checked： 确定组件是否选中。
checkedIcon： 在组件选中时显示的图标。
classes： 用于覆盖默认样式的样式。
color： 组件的颜色。
defaultChecked： 确定组件是否默认选中。
disabled： 确定组件是否禁用。
disableRipple： 确定是否在组件上禁用波纹效果。
icon： 在组件未选中时显示的图标。
id： 输入元素的id。
indeterminate： 确定组件是否处于不确定状态。
indeterminateIcon： 在组件处于不确定状态时显示的图标。
inputProps： 应用于输入元素的属性列表。
inputRef： 传递给输入元素的ref。
onChange： 当复选框的状态改变时触发的回调函数。
required： 确定输入元素是否必填。
size： 组件的大小。
sx： 允许定义系统覆盖以及附加的CSS样式的系统属性。
valu： 组件的值。

React MUI List Props：

子元素： 用于设置组件的内容。
类：这会覆盖现有的样式或向组件添加新样式。
组件： 用于访问根节点。
紧凑： 如果设置为true，内容填充会减少，子元素会更加紧密。默认值为false。
禁用填充： 如果设置为true，列表中的垂直填充将被移除。默认值为false。
子标题： 子标题的内容，通常为ListSubheader。
sx： 系统属性允许定义系统覆盖和额外的CSS样式。

React MUI ListItem属性：

类：这会覆盖现有的样式或向组件添加新样式。
对齐方式： 指定align-items样式属性。默认值为center。
自动聚焦： 如果设置为true，在第一次挂载时列表项将获得焦点。
子元素： 组件的内容。
组件： 用于根节点的组件。
组件： 用于InputBase内的每个插槽的组件。
组件属性： 用于Input内的每个插槽的属性。
紧凑： 如果设置为true，将使用为键盘和鼠标输入设计的紧凑垂直填充。
禁用： 如果设置为true，组件将被禁用。默认值为false。
禁用内边距： 如果设置为true，左右内边距将被移除。
禁用填充： 如果设置为true，所有填充都将被移除。
分隔线： 如果设置为true，将在列表项底部添加一个1像素的轻边框。
次要操作： 要显示在列表末尾的元素。
已选中： 如果设置为true，应用选中样式。
sx： 系统属性允许定义系统覆盖以及其他CSS样式。
按钮： 如果为true，则列表项是一个按钮。然后可以将适用于ButtonBase的属性应用于ListItem。

React MUI按钮属性：

children: 用于设置按钮的内容。
classes: 用于覆盖或扩展应用于组件的样式。
size: 用于自定义按钮的大小。
disableElevation: 是一个布尔值，用于确定按钮的高度。
fullWidth: 是一个布尔值，用于确定是否覆盖容器的整个宽度。
disabled: 是一个布尔值，用于启用或禁用按钮。
disableElevation: 是一个布尔值，用于启用或禁用按钮的高度外观。
disableFocusRipple: 是一个布尔值，用于启用或禁用键盘焦点涟漪效果。
startIcon: 在子元素之前的元素。
endIcon: 在子元素之后的元素。
href: 点击按钮时将链接到的URL。
color: 组件的颜色。
disableRipple: 是一个布尔值，用于禁用或启用涟漪效果。

创建React项目：

步骤1： 要创建一个React应用，你需要通过npm命令安装React模块。

npm create-react-app project name

步骤2 ：创建你的React项目后，进入文件夹执行不同的操作。

cd project name

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @mui/material @emotion/react @emotion/styled

项目结构：

React MUI转移列表输入

运行应用程序的步骤：

npm start

示例1： 以下示例展示了React MUI Transfer List Input。

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;

输出：

React MUI转移列表输入

示例2:

下面的示例演示了React MUI Transfer List Input，并显示选择的选项数量。

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 
                        onClick={handleToggleAll(items)} 
                        checked={numberOfChecked(items) ===  
                            items.length && items.length !== 0} 
                        indeterminate={ 
                            numberOfChecked(items) !==  
                                items.length && numberOfChecked(items) !== 0 
                        } 
                        disabled={items.length === 0} 
                        inputProps={{ 
                            'aria-label': 'all items selected', 
                        }} 
                        color="success"
                    /> 
                } 
                title={title} 
                subheader={` ${numberOfChecked(items)}/$ {items.length}  
                    selected`} 
            /> 
            <Divider /> 
            <List 
                sx={{ 
                    width: 200, 
                    height: 230, 
                    bgcolor: 'background.paper', 
                    overflow: 'auto', 
                }} 
                dense 
                component="div"
                role="list"
            > 
                {items.map((value) => { 
                    const labelId =  
                        `transfer-list-all-item- ${value}-label`; return ( <ListItem key={value} role="listitem" button onClick={handleToggle(value)} > <ListItemIcon> <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} color="success" disableRipple inputProps={{ 'aria-labelledby': labelId, }} /> </ListItemIcon> <ListItemText id={labelId} primary={`Item$ {value + 1}`} /> 
                        </ListItem> 
                    ); 
                })} 
                <ListItem /> 
            </List> 
        </Card> 
    ); 
  
    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('Choices', left)}</Grid> 
                    <Grid item> 
                        <Grid container direction="column" 
                            alignItems="center"> 
                            <Button 
                                sx={{ my: 0.5 }} 
                                variant="contained"
                                size="medium"
                                color="success"
                                onClick={handleCheckedRight} 
                                disabled={leftChecked.length === 0} 
                                aria-label="move selected right"
                            > 
                                > 
                            </Button> 
                            <Button 
                                sx={{ my: 0.5 }} 
                                variant="contained"
                                color="success"
                                size="medium"
                                onClick={handleCheckedLeft} 
                                disabled={rightChecked.length === 0} 
                                aria-label="move selected left"
                            > 
                                < 
                            </Button> 
                        </Grid> 
                    </Grid> 
                    <Grid item>{customList('Chosen', right)}</Grid> 
                </Grid> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI转移列表输入