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

Question

I'm new on React and this is my first page that I created, I'm using material-table and material-ui to help me.

This is my code:

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;

This code works, and list the users that I have on my database. My next step is create a Popover on actions Block and Delete to show to user a question to confirm if he really wanna delete or block the user on the line. I have searched in documentation of material-ui ( https://material-ui.com/components/popover/ ) how can I use the Popover with my table, but I cannot do this. I think I cannot use this prop aria-describedby={id} , but I don't know.

Someone can help me to achieve this or help to find a way?

Answer 1

I think you are not looking for a popover which is more like a small tooltip, but for a dialog, which needs attention from the user and blocks him from doing anything else.

Material-UI has a dialog component. You place it somewhere in the code. If the property "open" is true it blocks the user from doing anything else but confirming/canceling the deletion. If it set to false the dialog is not visible.

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