React Material Table 操作按钮标记覆盖多个操作答案

【问题标题】：React Material Table action button markup overriding for multiple actionsReact Material Table 操作按钮标记覆盖多个操作
【发布时间】：2019-09-03 19:12:09
【问题描述】：

操作覆盖功能允许我覆盖按钮，但它会覆盖所有操作按钮。例如，如果我有两个用于编辑和删除的操作按钮，并且我使用操作覆盖，那么我的两个按钮都会被相同的自定义代码覆盖。如何为不同的按钮指定不同的代码？

我的最终目标是根据 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'}}
        />
    );

【问题讨论】：

标签： reactjs react-redux material-table

【解决方案1】：

对于这个特定的用例，您可以像这样检查正确的图标名称来选择要呈现的按钮。

      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>
                        )
                    }
                }

      }}

【讨论】：

那么我如何使用material-ui select和三点操作并且在每个选项上都有不同的选项函数调用？
如何获取选中行的数据？当您想更改特定图标的组件时，您的示例有效，但是如果您想根据特定条件呈现按钮，那该怎么办？

【解决方案2】：

这个解决方案的措辞来自我：

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>
                            )
                    }


                }   
            }
 }}

【讨论】：