问题
Action overriding feature allows me to override button but it overrides all the action buttons. For example, if I have two action buttons for edit and delete and I use the Action overriding, both of my buttons get overridden with that same custom code. How can I specify different codes for different buttons?
My final goal is to conditionally disable edit and delete buttons based on the rowData. I have tried with isEditable feature as shown in the code below but it doesn't work either.
...
....
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'}}
/>
);
回答1:
for this specific use case, you can choose which Button to render based on checking the right icon name like this.
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>
)
}
}
}}
回答2:
This solution worded form me:
import React, { Component } from 'react';
import {Button} from '@material-ui/core/';
import Icon from '@material-ui/core/Icon';
class ButtonBack extends Component {
constructor(props) {
super(props);
this.state={
onClick: props.onClick,
icon: props.icon
}
};
render() {
return (
<Button label="Regresar" onClick={this.state.onClick}>
<Icon>{this.state.icon}</Icon>
Regresar
</Button>
);
}
}
export default ButtonBack;
components={{
Action: props => {
if (typeof props.action === "function"){
var element= props.action(props.data);
return (
<IconButton aria-label={element.icon} size="small"
onClick={element.onClick}
>
<Icon>{element.icon}</Icon>
</IconButton>
)
}else{
if (props.action.icon==="keyboard_backspace"){
return (
<ButtonBack icon={props.action.icon}
onClick={props.action.onClick}
>
</ButtonBack>
)
}else{
return (
<IconButton aria-label={props.action.icon} size="small"
onClick={props.action.onClick}
>
<Icon>{props.action.icon}</Icon>
</IconButton>
)
}
}
}
}}
来源:https://stackoverflow.com/questions/57777516/react-material-table-action-button-markup-overriding-for-multiple-actions