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;

此代码有效，并列出我在数据库中拥有的用户。我的下一步是在动作Popover和Block上创建一个Delete，向用户显示一个问题，以确认他是否确实要删除或阻止该行的用户。我已经搜索了material-ui（https://material-ui.com/components/popover/）的文档，如何在我的表中使用Popover，但是我不能这样做。我认为我无法使用此道具aria-describedby={id}，但我不知道。

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

Answer 1

我认为您不是在寻找更像是一个小工具提示的弹出窗口，而是在一个对话框中，需要用户注意并阻止他执行其他任何操作。

材料UI具有对话框组件。您将其放置在代码中的某个位置。如果属性“ open”为true，则它将阻止用户执行其他操作，只能确认/取消删除操作。如果设置为false，则对话框不可见。

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

如何在材质表的动作中使用材质UI的Popover？

1 个答案: