问什么是以动态的方式加载列表中的每个项目的材料UI对话框的正确方式？
EN

Stack Overflow用户

提问于 2022-01-29 06:51:02

回答 1查看 1.4K关注 0票数 1

假设我有一个客户列表，我以表格的格式显示他们。

我可以在每个客户行的末尾添加一些图标，让用户管理每一行。典型的图标有、delete、和、编辑以及类似的图标。

现在，我想添加一个图标/操作，它打开一个对话框，将一些数据从行传递到对话框，并在对话框关闭时从对话框中获取数据。

在角度上，我会很容易做到。因为我可以编程地调用showDialog方法或类似的方法，并将参数传递给它，并获得结果。很有活力。

然而，在react + Material中，我被困住了。

我想呈现一个对话框，在单击每一行的操作时，我希望显示该对话框并将数据传递给它，并从中获取数据。

正确的方法是什么？

reactjs

material-ui

回答 1

Stack Overflow用户

发布于 2022-01-29 09:54:13

呈现具有视图或编辑对话框的数据列表，该对话框可以使用React & MUI处理每一项

最低要求是：

创建一个对话框组件，它可以:显示信息、编辑信息和点击保存
，该父组件呈现所有数据，并具有打开/关闭对话框的逻辑，并且可以以更好的方式(

)连接到API。

这是一个用react，mui，和类型记录做的样本

定义示例数据和类型

const tablesData = [
    { customerId: 1, customerName: 'customer1', address: 'some address 1' },
    { customerId: 2, customerName: 'customer2', address: 'some address 2' },
    { customerId: 3, customerName: 'customer3', address: 'some address 3' },
    { customerId: 4, customerName: 'customer4', address: 'some address 4' },
    { customerId: 5, customerName: 'customer5', address: 'some address 5' },
];

type Customer = typeof tablesData[number];

定义了一个对话框组件，该组件可以显示客户的地址，如果您愿意，该地址可以编辑，并在以后提交给API。

interface EditCustomerDialogProps {
    open: boolean,
    closeHandler: () => void,
    customer: Customer,
    onSave: (customer: Customer) => void,
}

function EditCustomerDialog(props: EditCustomerDialogProps) {

    const { open, closeHandler, customer, onSave } = props;

    useEffect(function onCustomerChangeUpdateFormValues() {
        setAddress(customer.address);
    }, [customer]);

    const [address, setAddress] = useState('');
    const addressChangeHandler = useCallback(function _addressChangeHandler(event: any) {
        setAddress(event.target.value);
    }, []);


    const saveHandler = useCallback(function _saveHandler() {

        onSave({
            ...customer,
            address, // editable info,
        });

        closeHandler();
    }, [address]);


    return (
        <Dialog open={open} onClose={closeHandler}>

            <DialogTitle>
                {'Edit customer info'}
            </DialogTitle>

            <DialogContent dividers>
                <TextField
                    placeholder="address"
                    value={address}
                    onChange={addressChangeHandler}
                />
            </DialogContent>

            <DialogActions>
                <Button onClick={saveHandler}>
                    {'Save'}
                </Button>
                <Button onClick={closeHandler}>
                    {'Cancel'}
                </Button>
            </DialogActions>

        </Dialog>
    );
}

控制对话框并可能在保存时调用API的父组件

function ComponentXYZ() {


    const [openEditDialgo, setOpenEditDialog] = useState(false);

    const closeDialogHandler = useCallback(function _handleClose() {
        setOpenEditDialog(false);
    }, []);

    const [selectedCustomer, setSelectedCustomer] = useState<Customer>({
        customerId: 0,
        customerName: '',
        address: '',
    });

    function customerEditHandler(customer: any) {
        setSelectedCustomer({ ...customer });
        setOpenEditDialog(true);
    }

    const saveHandler = useCallback(function _saveHandler(customer: Customer) {
        console.log({ customer });
    }, []);

    return (
        <Fragment>

            <EditCustomerDialog
                open={openEditDialgo}
                closeHandler={closeDialogHandler}
                customer={selectedCustomer}
                onSave={saveHandler}
            />

            <div>
                {
                    tablesData.map(customer => (
                        <Stack
                            key={customer.customerId}
                            direction="row">
                            <Typography>
                                {customer.customerName}
                            </Typography>
                            <Button onClick={() => customerEditHandler(customer)}>
                                {'edit info'}
                            </Button>
                        </Stack>
                    ))
                }
            </div>

        </Fragment>
    );

}