Question

我的React程序中有一段代码，如下所示。但是，isEditable和isDeletable字段根本不起作用。我该怎么做才能在此处禁用某些操作？

----更新实际代码----

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
        />
        <title>ABC Customers</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

index.js

import MaterialTable from "material-table";
import React from "react";
import ReactDOM from "react-dom";


class Test extends React.Component {
    render() {
        const columns = [
            {title: "Firstname", field: "fname"},
            {title: "Lastname", field: "lname"},
            {
                title: "Registered",
                field: "registered",
                render: rowData => rowData && rowData.registered ? "✔️" : " ",
                editable: "never"
            }
        ];
        const data = [
                {
                    "fname": "Abc",
                    "id": "745ce3",
                    "lname": "Medo",
                    "registered": 0
                },
                {
                    "fname": "an",
                    "id": "111111",
                    "lname": "kad",
                    "registered": 1
                },
                {
                    "fname": "Yan",
                    "id": "4e9a93",
                    "lname": "Yang",
                    "registered": 1
                }
            ];
        return <MaterialTable
            title=""
            columns={columns}
            data={data}
            editable={{
                isEditable: rowData => {console.log(rowData); return (rowData.registered === 1 && rowData.id !== "111111");},
                isDeletable: rowData => (rowData.id !== "111111"),
                onRowAdd: newData =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve();
                        }, 1000);
                    }),
                onRowUpdate: (newData, oldData) =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve();
                        }, 1000);
                    }),
                onRowDelete: oldData =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve();
                        }, 1000);
                    })
            }}
        />
    }
}


class TestPage extends React.Component {
    render = () => <Test />
}

ReactDOM.render(
    <TestPage />,
    document.getElementById("root")
);

（反应物料表）：启用“可编辑”，而无法设置isEditable和isDeletable

0 个答案: