如何在反应中使用材料用户界面弹出框和材料表的操作?

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和DeletePopover，向用户显示一个问题，以确认他是否真的要删除或阻止该用户。 我已经在文档中搜索了material-ui(https://material-ui.com/components/popover/( 如何将 Popover 与我的表格一起使用，但我无法做到这一点。我想我不能使用这个道具aria-describedby={id}，但我不知道。

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

Answer 1

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

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

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