Таблица материалов React Редактируемые столбцы Предупреждения средства выбора даты - PullRequest
Новая
       61

Таблица материалов React Редактируемые столбцы Предупреждения средства выбора даты

0 голосов
/ 02 августа 2020

Я работаю над таблицей материалов.

Мне нужно добавить пару столбцов в мою таблицу данных . Мне нужно добавить средство выбора даты и времени в один из столбцов (редактируемый). Другой столбец не должен редактироваться. Итак, я определил свои столбцы, как показано ниже. 

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? Заранее спасибо.

1 Ответ

0 голосов
/ 03 августа 2020

Я также использую react-table в своем приложении. Эта проблема связана с текущей версией библиотеки, в вашем коде нет проблем по этому поводу. Есть ветка с этой продолжающейся проблемой, обсуждаемой прямо здесь в библиотеке GitHub. Если вас интересует производственная среда, это не будет там отображаться.

...