Reactjs 如何在物料表中显示菜单项
我尝试了材质表,希望在操作中添加一个菜单项,这样它就不会显示太多的操作,如编辑、删除。我在显示菜单项时遇到问题 示例代码:Reactjs 如何在物料表中显示菜单项,reactjs,material-table,Reactjs,Material Table,我尝试了材质表,希望在操作中添加一个菜单项,这样它就不会显示太多的操作,如编辑、删除。我在显示菜单项时遇到问题 示例代码: <MaterialTable columns={[ { title: t('customer'), field: 'name' }, { title: t('email'), field: 'email' }, { title: t('contactNumber'), field: 'contactNumber' }, { title: t
<MaterialTable
columns={[
{ title: t('customer'), field: 'name' },
{ title: t('email'), field: 'email' },
{ title: t('contactNumber'), field: 'contactNumber' },
{ title: t('status'), field: 'status' },
]}
data={list}
options={{
headerStyle: {
backgroundColor: '#00b7b2',
},
toolbar: false,
}}
actions={[
{
icon: 'menu',
tooltip: 'Menu',
onClick: (event, rowData) => {
this.openMenu(event)
},
},
]}
components={{
Action: props => (
<div>
<IconButton
onClick={(event) => props.action.onClick(event, props.data)}
>
<Icon>menu</Icon>
</IconButton>
<Menu
anchorEl={this.anchorEl}
open={Boolean(this.anchorEl)}
onClick={event => event.stopPropagation()}
onSelect={event => event.stopPropagation()}
onClose={this.closeMenu}
>
<MenuItem>
Action
</MenuItem>
</Menu>
</div>
),
}}
/>
{
此.openMenu(事件)
},
},
]}
组成部分={{
动作:道具=>(
props.action.onClick(事件,props.data)}
>
菜单
event.stopPropagation()}
onSelect={event=>event.stopPropagation()}
onClose={this.closeMenu}
>
行动
),
}}
/>
有什么解决办法吗
我成功地完成了这项任务。基本上你在正确的轨道上 采取如上所述的行动:
<MaterialTable
...
actions={[
{
icon: MenuIcon,
tooltip: 'Actions',
isFreeAction: false,
onClick: (event, row) => {
this.openMenu(event, row);
}
}
]}
...
/>
<Menu
id="simple-menu"
keepMounted
anchorEl={this.state.menuAnchor}
open={this.state.menuOpen}
onClose={this.handleMenuClose}
>
<MenuItem onClick={this.doSomething}>do something</MenuItem>
<MenuItem onClick={this.doSomethingElse}>do something else</MenuItem>
</Menu>
</center>
openMenu(event, row) {
let anchorElement = event.currentTarget;
this.setState({currentRow: row}, () => {
this.setState({menuAnchor: anchorElement});
this.setState({menuOpen: true});
});
}
doSomething() {
row = this.state.currentRow;
// do something
}