确认 Material Tabel [React] 中的自定义操作

Question

例如，是否可以向自定义操作添加确认

actions={[
    {
      icon: 'save',
      tooltip: 'Confirm',
      onClick: (event, rowData) => { /* something */}
    }
  ]}

我想要类似的东西editable.onRowDelete：

编辑：我想在actions财产中创建自己的操作。例如 的动作Cancel reservation。单击此操作按钮后，此行会像上面一样更改并等待接受。确认后做一些事情（例如发布到 API）。

Answer 1

您好，您可以检查这个示例：

\n\n

import React from \'react\';\nimport MaterialTable from \'material-table\';\n\nexport default function MaterialTableDemo() {\n    const [state, setState] = React.useState({\n        columns: [\n            {title: \'Name\', field: \'name\'},\n            {title: \'Surname\', field: \'surname\'},\n            {title: \'Birth Year\', field: \'birthYear\', type: \'numeric\'},\n            {\n                title: \'Birth Place\',\n                field: \'birthCity\',\n                lookup: {34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\'},\n            },\n        ],\n        data: [\n            {name: \'Mehmet\', surname: \'Baran\', birthYear: 1987, birthCity: 63},\n            {\n                name: \'Zerya Bet\xc3\xbcl\',\n                surname: \'Baran\',\n                birthYear: 2017,\n                birthCity: 34,\n            },\n        ],\n    });\n\n    return (\n        <MaterialTable\n            title="Editable Example"\n            columns={state.columns}\n            data={state.data}\n            editable={{\n                onRowAdd: (newData) =>\n                    new Promise((resolve) => {\n                        setTimeout(() => {\n                            resolve();\n                            setState((prevState) => {\n                                const data = [...prevState.data];\n                                data.push(newData);\n                                return {...prevState, data};\n                            });\n                        }, 600);\n                    }),\n                onRowUpdate: (newData, oldData) =>\n                    new Promise((resolve) => {\n                        setTimeout(() => {\n                            resolve();\n                            if (oldData) {\n                                setState((prevState) => {\n                                    const data = [...prevState.data];\n                                    data[data.indexOf(oldData)] = newData;\n                                    return {...prevState, data};\n                                });\n                            }\n                        }, 600);\n                    }),\n                onRowDelete: (oldData) =>\n                    new Promise((resolve) => {\n                        setTimeout(() => {\n                            resolve();\n                            setState((prevState) => {\n                                const data = [...prevState.data];\n                                data.splice(data.indexOf(oldData), 1);\n                                return {...prevState, data};\n                            });\n                        }, 600);\n                    }),\n            }}\n        />\n    );\n}\n

\n\n

来源

\n\n

更新代码

\n\n

import React, {forwardRef} from \'react\';\nimport MaterialTable from \'material-table\';\n\nimport {AddBox, ArrowUpward, Check, ChevronLeft, ChevronRight, Clear, DeleteOutline, Edit, FilterList, FirstPage, LastPage, Remove, Save, SaveAlt, Search, ViewColumn} from \'@material-ui/icons\';\n\nexport default function MaterialTableDemo() {\n    const [state, setState] = React.useState({\n        columns: [\n            {title: \'Name\', field: \'name\'},\n            {title: \'Surname\', field: \'surname\'},\n            {title: \'Birth Year\', field: \'birthYear\', type: \'numeric\'},\n            {\n                title: \'Birth Place\',\n                field: \'birthCity\',\n                lookup: {34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\'},\n            },\n        ],\n        data: [\n            {name: \'Mehmet\', surname: \'Baran\', birthYear: 1987, birthCity: 63},\n            {\n                name: \'Zerya Bet\xc3\xbcl\',\n                surname: \'Baran\',\n                birthYear: 2017,\n                birthCity: 34,\n            },\n        ],\n    });\n\n    const tableIcons = {\n        Add: forwardRef((props, ref) => <AddBox {...props} ref={ref}/>),\n        Save: forwardRef((props, ref) => <Save {...props} ref={ref}/>),\n        Check: forwardRef((props, ref) => <Check {...props} ref={ref}/>),\n        Clear: forwardRef((props, ref) => <Clear {...props} ref={ref}/>),\n        Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref}/>),\n        DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref}/>),\n        Edit: forwardRef((props, ref) => <Edit {...props} ref={ref}/>),\n        Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref}/>),\n        Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref}/>),\n        FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref}/>),\n        LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref}/>),\n        NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref}/>),\n        PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref}/>),\n        ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref}/>),\n        Search: forwardRef((props, ref) => <Search {...props} ref={ref}/>),\n        SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref}/>),\n        ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref}/>),\n        ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref}/>)\n    };\n\n    function clickHandler(event) {\n        alert(\'worked\');\n    }\n\n    return (\n        <MaterialTable\n            icons={tableIcons}\n            title="Editable Example"\n            columns={state.columns}\n            data={state.data}\n            actions={[\n                {\n                    icon: tableIcons.Save,\n                    tooltip: \'Save User\',\n                    onClick: (event, rowData) => alert("You saved " + rowData.name)\n                }\n            ]}\n        />\n    );\n}\n

\n