如何在反应中使用 material-ui Popover 和 material-table 的动作？

Question

我是React 的新手，这是我创建的第一个页面，我正在使用material-table 和material-ui 来帮助我。

这是我的代码：

import React, { useState, useEffect } from 'react';
import { Fade } from "@material-ui/core";
import MaterialTable from 'material-table';
import { makeStyles } from '@material-ui/core/styles';

import api from '../../services/api.js';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        width: '70%',
        margin: 'auto',
        marginTop: 20,
        boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.4)'
    }
}));

function User(props) {
    const classes = useStyles();
    const [checked, setChecked] = useState(false);
    const [tableData, setTableData] = useState([]);

    let config = {
        columns: [
            { title: 'Name', field: 'name' },
            { title: 'Sector', field: 'sector' },
            { title: 'E-mail', field: 'email'},
            { title: 'Tel', field: 'tel'}
        ],
        actions: [
            { icon: 'create', tooltip: 'Edit', onClick: (event, rowData) => alert('Edit')},
            { icon: 'lock', tooltip: 'Block', onClick: (event, rowData) => alert('Block')},
            { icon: 'delete', tooltip: 'Delete', onClick: (event, rowData) => alert('Delete') },
            { icon: 'visibility', tooltip: 'Last Access', onClick: (event, rowData) => alert('Last') },
            { icon: "add_box", tooltip: "Add", position: "toolbar", onClick: () => { alert('Add') } }
        ],
        options: {
            headerStyle: { color: 'rgba(0, 0, 0, 0.54)' },
            actionsColumnIndex: -1,
            exportButton: true,
            paging: true,
            pageSize: 10,
            pageSizeOptions: [],
            paginationType: 'normal'
        },
        localization: {
            body: { 
                emptyDataSourceMessage: 'No data' 
            },
            toolbar: { 
                searchTooltip: 'Search',
                searchPlaceholder: 'Search',
                exportTitle: 'Export'
            },
            pagination: {  
                labelRowsSelect: 'Lines',
                labelDisplayedRows: '{from} to {to} {count} itens',
                firstTooltip: 'First',
                previousTooltip: 'Previous',
                nextTooltip: 'Next',
                lastTooltip: 'Last'
            },
            header: {
                actions: 'Actions'
            }
        }
    }

    useEffect(() => {
        setChecked(prev => !prev);

        async function loadUsers() {
            const response = await api.get('/users');
            setTableData(response.data);
        }

        loadUsers();
    }, [])

    return (
        <>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

            <Fade in={checked} style={{ transitionDelay: checked ? '300ms' : '0ms' }}>
                <div className={classes.root}>
                    <MaterialTable editable={config.editable} options={config.options} localization={config.localization} title="Usuários" columns={config.columns} data={tableData} actions={config.actions}></MaterialTable>
                </div>
            </Fade>
        </>
    );
}

export default User;

此代码有效，并列出了我在数据库中拥有的用户。我的下一步是在操作Block 和Delete 上创建一个Popover，以向用户显示一个问题，以确认他是否真的想删除或阻止在线用户。 我在material-ui (https://material-ui.com/components/popover/) 的文档中搜索了如何在我的桌子上使用 Popover，但我不能这样做。我想我不能使用这个道具aria-describedby={id}，但我不知道。

有人可以帮助我实现这一目标或帮助找到方法吗？

Answer 1

我认为您不是在寻找更像是一个小工具提示的弹出框，而是在寻找一个对话框，它需要用户注意并阻止他做任何其他事情。

Material-UI 有一个对话框组件。你把它放在代码中的某个地方。如果属性“open”为真，则它会阻止用户执行任何其他操作，但确认/取消删除。如果设置为 false，则对话框不可见。

https://material-ui.com/components/dialogs/