确认材料表中的自定义操作 [React]

Posted 2023-02-22

【中文标题】确认材料表中的自定义操作 [React]

【英文标题】：Confirmation for custom action in Material Tabel [React]

【发布时间】：2020-09-02 18:44:05

【问题描述】：

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

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

我想要editable.onRowDelete：

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

【问题讨论】：

似乎可以使用component overriding。

【参考方案1】：

您好，您可以查看以下示例：

import React from 'react';
import MaterialTable from 'material-table';

export default function MaterialTableDemo() 
    const [state, setState] = React.useState(
        columns: [
            title: 'Name', field: 'name',
            title: 'Surname', field: 'surname',
            title: 'Birth Year', field: 'birthYear', type: 'numeric',
            
                title: 'Birth Place',
                field: 'birthCity',
                lookup: 34: 'İstanbul', 63: 'Şanlıurfa',
            ,
        ],
        data: [
            name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63,
            
                name: 'Zerya Betül',
                surname: 'Baran',
                birthYear: 2017,
                birthCity: 34,
            ,
        ],
    );

    return (
        <MaterialTable
            title="Editable Example"
            columns=state.columns
            data=state.data
            editable=
                onRowAdd: (newData) =>
                    new Promise((resolve) => 
                        setTimeout(() => 
                            resolve();
                            setState((prevState) => 
                                const data = [...prevState.data];
                                data.push(newData);
                                return ...prevState, data;
                            );
                        , 600);
                    ),
                onRowUpdate: (newData, oldData) =>
                    new Promise((resolve) => 
                        setTimeout(() => 
                            resolve();
                            if (oldData) 
                                setState((prevState) => 
                                    const data = [...prevState.data];
                                    data[data.indexOf(oldData)] = newData;
                                    return ...prevState, data;
                                );
                            
                        , 600);
                    ),
                onRowDelete: (oldData) =>
                    new Promise((resolve) => 
                        setTimeout(() => 
                            resolve();
                            setState((prevState) => 
                                const data = [...prevState.data];
                                data.splice(data.indexOf(oldData), 1);
                                return ...prevState, data;
                            );
                        , 600);
                    ),
            
        />
    );

Source

更新代码

import React, forwardRef from 'react';
import MaterialTable from 'material-table';

import AddBox, ArrowUpward, Check, ChevronLeft, ChevronRight, Clear, DeleteOutline, Edit, FilterList, FirstPage, LastPage, Remove, Save, SaveAlt, Search, ViewColumn from '@material-ui/icons';

export default function MaterialTableDemo() 
    const [state, setState] = React.useState(
        columns: [
            title: 'Name', field: 'name',
            title: 'Surname', field: 'surname',
            title: 'Birth Year', field: 'birthYear', type: 'numeric',
            
                title: 'Birth Place',
                field: 'birthCity',
                lookup: 34: 'İstanbul', 63: 'Şanlıurfa',
            ,
        ],
        data: [
            name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63,
            
                name: 'Zerya Betül',
                surname: 'Baran',
                birthYear: 2017,
                birthCity: 34,
            ,
        ],
    );

    const tableIcons = 
        Add: forwardRef((props, ref) => <AddBox ...props ref=ref/>),
        Save: forwardRef((props, ref) => <Save ...props ref=ref/>),
        Check: forwardRef((props, ref) => <Check ...props ref=ref/>),
        Clear: forwardRef((props, ref) => <Clear ...props ref=ref/>),
        Delete: forwardRef((props, ref) => <DeleteOutline ...props ref=ref/>),
        DetailPanel: forwardRef((props, ref) => <ChevronRight ...props ref=ref/>),
        Edit: forwardRef((props, ref) => <Edit ...props ref=ref/>),
        Export: forwardRef((props, ref) => <SaveAlt ...props ref=ref/>),
        Filter: forwardRef((props, ref) => <FilterList ...props ref=ref/>),
        FirstPage: forwardRef((props, ref) => <FirstPage ...props ref=ref/>),
        LastPage: forwardRef((props, ref) => <LastPage ...props ref=ref/>),
        NextPage: forwardRef((props, ref) => <ChevronRight ...props ref=ref/>),
        PreviousPage: forwardRef((props, ref) => <ChevronLeft ...props ref=ref/>),
        ResetSearch: forwardRef((props, ref) => <Clear ...props ref=ref/>),
        Search: forwardRef((props, ref) => <Search ...props ref=ref/>),
        SortArrow: forwardRef((props, ref) => <ArrowUpward ...props ref=ref/>),
        ThirdStateCheck: forwardRef((props, ref) => <Remove ...props ref=ref/>),
        ViewColumn: forwardRef((props, ref) => <ViewColumn ...props ref=ref/>)
    ;

    function clickHandler(event) 
        alert('worked');
    

    return (
        <MaterialTable
            icons=tableIcons
            title="Editable Example"
            columns=state.columns
            data=state.data
            actions=[
                
                    icon: tableIcons.Save,
                    tooltip: 'Save User',
                    onClick: (event, rowData) => alert("You saved " + rowData.name)
                
            ]
        />
    );

【讨论】：

感谢您的回答。实际上，我的意思是我在 actions 属性中创建自己的操作。例如操作Cancel reservation。单击此操作按钮后，此行更改如上并等待接受。确认后做一些事情（例如发布到 API）。

@sqtr 我添加了另一个示例。请检查一下，希望对您有所帮助。

这不是我想要的。我刚刚更新了图像以向您执行我的预期效果。我正在考虑单击delete 按钮后的效果，但对于自定义操作（使用操作属性）。例如，让我们看看你上面的例子。单击Save user 按钮后，此行更改为确认Are you sure you want to save this user ? 单击cancel 后返回到上一个视图。点击save/submit后会执行一些方法。

我明白，但我认为这很难。为什么不使用确认对话并获得用户的决定，例如是或否，然后您可以根据决定调用其他方法。