reactjs - React Material Table 操作按钮标记覆盖多个操作
问题描述
操作覆盖功能允许我覆盖按钮,但它会覆盖所有操作按钮。例如,如果我有两个用于编辑和删除的操作按钮,并且我使用操作覆盖,那么我的两个按钮都会被相同的自定义代码覆盖。如何为不同的按钮指定不同的代码?
我的最终目标是根据 rowData 有条件地禁用编辑和删除按钮。我已尝试使用 isEditable 功能,如下面的代码所示,但它也不起作用。
...
....
const components = {
Action: props => (
<IconButton aria-label="delete" size="small"
disabled={props.data.email === 'admin@pipilika.com'}
onClick={(event) => props.action.onClick(event, props.data)}
>
<Icon>delete</Icon>
</IconButton>
)
};
const actions = [
{
icon: 'edit',
tooltip: 'Edit Index',
onClick: (event, rowData) => {
this.onEditClick(null, rowData._id);
}
},
{
icon: 'delete',
tooltip: 'Delete Index',
onClick: (event, rowData) => {
this.onDeleteClick(null, rowData._id);
}
},
];
const options= {
showTitle: false,
actionsColumnIndex: -1,
searchFieldStyle: {
color: "#fff"
}
};
const editable= {
isEditable: rowData => rowData.dataType === "html",
isDeletable: rowData => rowData.dataType === "html",
};
return(
<MaterialTable
editable={editable}
title="Created Index List"
columns={columns}
data={dataTypes}
actions={actions}
options={options}
components={components}
style={{overflow: 'hidden'}}
/>
);
解决方案
对于这个特定的用例,您可以像这样检查正确的图标名称来选择要呈现的 Button。
components={{
Action:
props => {
if(props.action.icon === 'edit'){
return(
<Button
onClick={(event) => props.action.onClick(event, props.data)}
color="primary"
variant="contained"
style={{textTransform: 'none'}}
size="small"
disabled
>
My Button
</Button>
)
}
if(props.action.icon === 'save'){
return(
<Button
onClick={(event) => props.action.onClick(event, props.data)}
color="primary"
variant="contained"
style={{textTransform: 'none'}}
size="small"
>
My Button
</Button>
)
}
}
}}
推荐阅读
- c# - Mailkit:从特定文件夹中获取消息
- powershell - 在 Windows (powershell) 中将十六进制转储到 zip 文件
- python - 重命名列中的重复值
- c# - ServiceStack.Redis:PooledRedisClientManager 和 RedisManagerPool 等待 prev req 完成
- javascript - 可以在反应组件之外使用handleChange函数吗?
- ruby-on-rails - 在 Rails 控制器动作中,如何从 cookie 中获取会话对象?
- java - 一种向所有服务器成员发送直接消息的方法?Java 不和谐 API
- python - Python字符串条件语句
- c# - C# - 为什么我的错误处理包装函数没有捕获异常?
- python - 如何在python程序中设置定时器