reactjs - Reactjs - Material-UI 组件在功能中不起作用
问题描述
我正在尝试将材质 UI 组件添加到数组以创建可扩展数组。但是,当我在函数(下面的)中使用此组件时newObj
,它不起作用。但是,如果我将它放在导出默认函数的 return() 中,ExpandableTable()
则没有问题。
export default function ExpandableTable() {
const [tab, setTab] = useState<[] | any>([]);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
// console.log(event.currentTarget); give me something but nothing opens
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
useEffect(() => {addRowTop(tab.length);}, []);
const addRowBot = (key: any) => {
const tabIndex = tab.findIndex((i: any) => i.key == key);
tab.splice(tabIndex + 1, 0, newObj(tab.length));
setTab([...tab]);
console.log(tab);
};
const addRowTop = (key: number) => {...};
const deleteRow = (key: any) => {...};
const newObj = (i: number) => {
return (
<Grid container direction={'row'} justify={'center'}>
<SelectNativeTabExtend />
<div>
{/* This IconButton is display */}
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
id="long-menu"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={handleClose}
PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 4.5, width: '20ch', }, }}>
<MenuItem onClick={() => { addRowTop(i); handleClose() }}>
{/* menuItem are not poping */}
</MenuItem>
</Menu>
</div>
</Grid>
)
}
return (
<div style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{tab}
{/* If I put the same code's Menu here, it's working perfeclty */}
</div>
);
}
解决方案
你应该打电话给newObj
你的回报,像这样
return (
<div style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{tab}
{newObj(<your param>)}
</div>
);
推荐阅读
- powershell - 读取 openssl.cnf 文件时出现权限被拒绝错误
- flask - 使用 Flask 和 PythonAnywhere 路由到 Service-Worker
- ios - 自定义字体适用于应用程序但不适用于小部件
- scrapy - python 3.8版本中pip install scrapy的scrapy安装错误?
- google-cloud-firestore - 是每个集合还是每个项目的复合索引限制?
- sql - 从 SQL Server 获取 CSV 字段中的第一个值
- python - 如何一次将不同大小的值添加到熊猫数据框中
- flash - Adobe AIR 应用程序在 HTTP 请求上给出错误 2032 (403)
- android - 无法启动 Android 模拟器
- c++ - 如何修复警告:隐式转换更改签名?