Question

我正在材料表上。

我需要在我的数据表中添加几列。我需要在其中一列（可编辑）中添加日期时间选择器。另一列应不可编辑。因此，我定义了我的列，如下所示。

const columns1 = [
    { title: 'Name', field: 'name', type: 'string', editable: 'never' },
    { title: 'Birth Date', field: 'birthDate', type: 'datetime' }
];

我引用了https://material-table.com/#/docs/features/editable中的代码。

修改后的数据表，如下所示。

import React, { Component } from "react";
import MaterialTable from "material-table";


const columns1 = [
    { title: 'Name', field: 'name', type: 'string', editable: 'never' },
    { title: 'Birth Date', field: 'birthDate', type: 'datetime' }
];
const data1 = [{ id: 1, name: 'user1', birthDate: '2020-08-01 10:08:00' },
{ id: 2, name: 'user2', birthDate: '2020-09-01 06:24:00' }];

class Chart4 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: data1
        }
    }
    render() {

        return (
            <div>

                <MaterialTable
                    title="Simple Material Table"
                    columns={columns1}
                    data={data1}
                    cellEditable={{
                        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
                            return new Promise((resolve, reject) => {
                                let date = new Date(newValue);

                                let monthNumber = date.getMonth() + 1;
                                let day = date.getDate();
                                let hour = date.getHours();
                                let minutes = date.getMinutes();
                                let seconds = date.getSeconds();

                                month = month < 10 ? `0${month}` : month;
                                day = day < 10 ? `0${day}` : day;
                                hour = hour < 10 ? `0${hour}` : hour;
                                minutes = minutes < 10 ? `0${minutes}` : minutes;
                                seconds = seconds < 10 ? `0${seconds}` : seconds;

                                var month = new Array();
                                month[0] = "JAN";
                                month[1] = "FEB";
                                month[2] = "MAR";
                                month[3] = "APR";
                                month[4] = "MAY";
                                month[5] = "JUN";
                                month[6] = "JUL";
                                month[7] = "AUG";
                                month[8] = "SEP";
                                month[9] = "OCT";
                                month[10] = "NOV";
                                month[11] = "DEC";

                                let monthIntext = month[monthNumber - 1];

                                let formattedDate = day + "-" + monthIntext + "-" + date.getFullYear() + " " + hour + ":" + minutes;
                                let dataTemp = [...this.state.data];
                                dataTemp.forEach(userInfo => {
                                    if (userInfo.id === rowData.id) {
                                        userInfo[columnDef.field] = formattedDate;
                                    }
                                })
                                setTimeout(resolve, 1000);
                            });
                        }
                    }}
                />
            </div>
        );
    }
}

export default Chart4;

这似乎可行，但是我收到了如下所示的警告。

    index.js:1 Warning: React does not recognize the `cellEditable` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `celleditable` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
        in td (created by ForwardRef(TableCell))
        in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
        in WithStyles(ForwardRef(TableCell)) (created by MTableCell)
        in MTableCell (created by MTableBodyRow)
        in tr (created by ForwardRef(TableRow))
        in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
        in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
        in MTableBodyRow (created by MTableBody)
        in tbody (created by ForwardRef(TableBody))
        in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
        in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
        in MTableBody (created by Droppable)
        in table (created by ForwardRef(Table))
        in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
        in WithStyles(ForwardRef(Table)) (created by Droppable)
        in div (created by Droppable)
        in div (created by Droppable)
        in div (created by Droppable)
        in Droppable (created by ConnectFunction)
        in ConnectFunction
        in ConnectFunction (created by MaterialTable)
        in div
        in Unknown (created by WithStyles(Component))
        in WithStyles(Component) (created by MaterialTable)
        in div (created by ForwardRef(Paper))
        in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
        in WithStyles(ForwardRef(Paper)) (created by Container)
        in Container (created by MaterialTable)
        in Provider (created by App)
        in App (created by ErrorBoundary)
        in ErrorBoundary (created by DragDropContext)
        in DragDropContext (created by MaterialTable)
        in MaterialTable
        in Unknown (created by WithStyles(Component))
        in WithStyles(Component) (at Chart4.js:24)
        in div (at Chart4.js:22)
        in Chart4 (at App.js:9)
        in div (at App.js:8)
        in App (at src/index.js:9)
        in StrictMode (at src/index.js:8)

index.js:1 Warning: Unknown event handler property `onCellEditStarted`. It will be ignored.
    in td (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by MTableCell)
    in MTableCell (created by MTableBodyRow)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
    in MTableBodyRow (created by MTableBody)
    in tbody (created by ForwardRef(TableBody))
    in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
    in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
    in MTableBody (created by Droppable)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in Droppable (created by ConnectFunction)
    in ConnectFunction
    in ConnectFunction (created by MaterialTable)
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at Chart4.js:24)
    in div (at Chart4.js:22)
    in Chart4 (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
validateProperty$1 @ react-dom.development.js:5484
warnUnknownProperties @ react-dom.development.js:5595
validateProperties$2 @ react-dom.development.js:5619
validatePropertiesInDevelopment @ react-dom.development.js:5662
setInitialProperties @ react-dom.development.js:5941
finalizeInitialChildren @ react-dom.development.js:7499
completeWork @ react-dom.development.js:18978
completeUnitOfWork @ react-dom.development.js:22192
performUnitOfWork @ react-dom.development.js:22165
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.js:141
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Warning: Unknown event handler property `onCellEditFinished`. It will be ignored.
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
    in MTableBodyRow (created by MTableBody)
    in tbody (created by ForwardRef(TableBody))
    in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
    in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
    in MTableBody (created by Droppable)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in Droppable (created by ConnectFunction)
    in ConnectFunction
    in ConnectFunction (created by MaterialTable)
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at Chart4.js:24)
    in div (at Chart4.js:22)
    in Chart4 (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

有人可以告诉我需要做什么来解决这些警告吗？还可以对onCellEditApproved进行任何改进吗？预先感谢。

Answer 1

我也在我的应用程序中使用react-table，此问题与库的当前版本有关，在您的代码中与此无关。该库的GitHub中有一个线程正在讨论right here这个持续存在的问题。如果您关注生产环境，则不会在此处显示。

物料表反应可编辑列日期选择器警告

1 个答案: