如何免费为 ReactJS 管理员制作 DualListInput

Question

我知道我可以使用 from react-admin 但它不是免费的方式，所以我发现我可以使用来自 mui 的 Transferlist 在这里输入链接描述。但是当我尝试接近解决方案时，我实际上并没有使用数据通过

ractjs-admin data provider

提交它。所以我发现它有一个

useInput

，然后我对这个useInput做了更多的研究它仍然没有很好地工作，它只能提交一个字符串而不是一个字符串数组。

我的代码如下所示，请帮我弄清楚。

import * as 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';
import { useInput } from 'react-admin';

function not(a: readonly string[], b: readonly string[]) {
    return a.filter((value) => b.indexOf(value) === -1);
}

function intersection(a: readonly string[], b: readonly string[]) {
    return a.filter((value) => b.indexOf(value) !== -1);
}

export default function TransferList({ stores, source, right, setRight }) {
    const { id, field, fieldState } = useInput({ source });

    const [checked, setChecked] = React.useState<readonly string[]>([]);
    const [left, setLeft] = React.useState<readonly string[]>(stores);



    const leftChecked = intersection(checked, left);
    const rightChecked = intersection(checked, right);

    const handleToggle = (value: string) => () => {
        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 customListSelect = (items, a, b) => {

        return (<Paper sx={{ width: 400, height: 630, overflow: 'auto' }} elevation={3}>
            <List dense component="div" role="list"
            // id={id}
            //     {...field}
            >
                {items.map((value: string) => {
                    // const labelId = `transfer-list-item-${value}-label`;
                    return (
                        <ListItem
                            key={value}
                            // id={a} {...b}
                            role="listitem"
                            // button
                            onClick={handleToggle(value)}
                        >
                            <input name="array[]" id={a} {...b} value={value} />
                            <ListItemIcon>
                                <Checkbox
                                    checked={checked.indexOf(value) !== -1}
                                    tabIndex={-1}
                                    disableRipple
                                    inputProps={{
                                        'aria-labelledby': value,
                                    }}
                                />
                            </ListItemIcon>
                            <ListItemText id={value} primary={value} />
                        </ListItem>
                    );
                })}
            </List>
        </Paper>
        );
    }


    const customList = (items: readonly string[]) => (
        <Paper sx={{ width: 400, height: 630, overflow: 'auto' }} elevation={3}>
            <List dense component="div" role="list">
                {items.map((value: string) => {
                    // 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
                                    inputProps={{
                                        'aria-labelledby': value,
                                    }}
                                />
                            </ListItemIcon>
                            <ListItemText id={value} primary={value} />
                        </ListItem>
                    );
                })}
            </List>
        </Paper>
    );

    return (
        <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="outlined"
                        size="small"
                        onClick={handleAllRight}
                        disabled={left.length === 0}
                        aria-label="move all right"
                    >
                        ≫
                    </Button>
                    <Button
                        sx={{ my: 0.5 }}
                        variant="outlined"
                        size="small"
                        onClick={handleCheckedRight}
                        disabled={leftChecked.length === 0}
                        aria-label="move selected right"
                    >
                        &gt;
                    </Button>
                    <Button
                        sx={{ my: 0.5 }}
                        variant="outlined"
                        size="small"
                        onClick={handleCheckedLeft}
                        disabled={rightChecked.length === 0}
                        aria-label="move selected left"
                    >
                        &lt;
                    </Button>
                    <Button
                        sx={{ my: 0.5 }}
                        variant="outlined"
                        size="small"
                        onClick={handleAllLeft}
                        disabled={right.length === 0}
                        aria-label="move all left"
                    >
                        ≪
                    </Button>
                </Grid>
            </Grid>
            <Grid item>
                {customListSelect(right, id, field)}
            </Grid>
        </Grid>
    );
}

在上面的代码中，我在某个地方调用它，以便于调试，我显示了调用的主要参数。

    const [right, setRight] = React.useState<readonly string[]>([]);
    const stores = ["abc", "def", "ghk"]