在 React 中如何使用 material-ui Popover 和 material-table 的动作?
How can I use a material-ui Popover with the actions of material-table in react?
我是 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 与我的 table 一起使用,但我无法这样做。我想我不能使用这个道具aria-describedby={id}
,但我不知道。
有人可以帮助我实现这个或帮助找到方法吗?
我认为您不是在寻找更像是一个小工具提示的弹出窗口,而是在寻找一个对话框,它需要用户注意并阻止他做任何其他事情。
Material-UI 有一个对话框组件。你把它放在代码的某个地方。如果 属性 "open" 为真,它会阻止用户执行除 confirming/canceling 删除之外的任何其他操作。如果它设置为 false,则对话框不可见。
我是 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 与我的 table 一起使用,但我无法这样做。我想我不能使用这个道具aria-describedby={id}
,但我不知道。
有人可以帮助我实现这个或帮助找到方法吗?
我认为您不是在寻找更像是一个小工具提示的弹出窗口,而是在寻找一个对话框,它需要用户注意并阻止他做任何其他事情。
Material-UI 有一个对话框组件。你把它放在代码的某个地方。如果 属性 "open" 为真,它会阻止用户执行除 confirming/canceling 删除之外的任何其他操作。如果它设置为 false,则对话框不可见。