реагировать материал-таблица не будет отображать значок при нажатии - PullRequest
Новая
       36

реагировать материал-таблица не будет отображать значок при нажатии

1 голос
/ 18 февраля 2020

Я искал несколько дней. До сих пор я не могу понять это. Я хочу, чтобы мой значок видимости скрывался при нажатии. Но я не знаю, почему это не автоматически рендеринга. Я должен напечатать что-нибудь в строке поиска, чтобы получить значок visibility_off.

Я читаю документацию, но она не работает https://material-table.com/# / docs / features / actions и это https://material-table.com/# / docs / features / component-overriding

это мой код 

(rowData) => (
            rowData.isActive === 1 ?
                {
                    icon: "visibility_off",
                    tooltip: "Hide Row",
                    onClick: () => {

                        console.log(rowData);
                        // console.log(event);
                        // console.log(row.isActive);
                        console.log(tableConfig.data[rowData.tableData.id].isActive);
                        console.log(rowData.tableData.id);
                        tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
                        setTableConfig(tableConfig);
                        // console.log(row.isActive);

                        /*// console.log(row.tableData.id);
                        //find index
                        console.log(data[row.tableData.id]);
                        //change the data value
                        data[row.tableData.id].isActive = 0;


                        //set data with new data
                        setData(data);*/
                    },
                } :
                {
                    icon: "visibility",
                    tooltip: "Show Row",
                    onClick: () => {
                        console.log(rowData);
                        // console.log(event);
                        // console.log(row.isActive);
                        console.log(tableConfig.data[rowData.tableData.id].isActive);
                        console.log(rowData.tableData.id);
                        tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
                        setTableConfig(tableConfig);
                        // console.log(row.isActive);
                    },
                }

И это полный код. 

const [tableConfig, setTableConfig] = useState({
    columns:[
        { title: "ID", field: "processID" },
        { title: "Config Name", field: "configName" },
        { title: "Status", field: "processStatus" },
        { title: "Progress", field: "progressPercentage", type: "numeric" },
        { title: "Start Time", field: "lastStartDateTime", type: "datetime" },
        { title: "End Time", field: "lastEndDateTime", type: "datetime" },
        { title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
        { title: "Total Output Records", field: "masterRecords", type: "numeric" },
    ],
    data:[
        {
            processID: "191030070911880",
            configName: "Test2333",
            configDesc: "191030070911880 Test2333",
            userID: "1",
            createdDateTime: "2019-10-30 03:10:06.844",
            lastModifiedDateTime: "2020-01-18 02:24:59.051",
            isActive: 0,
            lastEditUserID: "1",
            processStatus: "success",
            progressPercentage: 0,
            lastStartDateTime: "2020-01-18 02:32:45.976",
            lastEndDateTime: "2020-01-18 02:32:56.197",
            lastInputRecords: 15,
            masterRecords: 15,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "191030072229070",
            configName: "Testimony2",
            configDesc: "191030072229070 Testimony2",
            userID: "1",
            createdDateTime: "2019-10-30 03:22:34.732",
            lastModifiedDateTime: "2019-10-30 03:22:34.732",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "error",
            progressPercentage: 0,
            lastStartDateTime: "2020-01-18 02:32:36.533",
            lastEndDateTime: "2020-01-18 02:32:36.566",
            lastInputRecords: 15,
            masterRecords: 0,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "191030084112873",
            configName: "Testimony3",
            configDesc: "191030084112873 Testimony3",
            userID: "1",
            createdDateTime: "2019-10-30 04:41:19.856",
            lastModifiedDateTime: "2019-10-30 04:41:19.856",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "error",
            progressPercentage: 0,
            lastStartDateTime: "2020-01-18 02:33:59.231",
            lastEndDateTime: "2020-01-18 02:33:59.256",
            lastInputRecords: 15,
            masterRecords: 0,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "191104084001318",
            configName: "TestA",
            configDesc: "191104084001318 TestA",
            userID: "1",
            createdDateTime: "2019-11-04 03:40:44.697",
            lastModifiedDateTime: "2019-11-04 05:45:45.388",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "success",
            progressPercentage: 0,
            lastStartDateTime: "2019-11-04 05:43:56.451",
            lastEndDateTime: "2019-11-04 05:44:06.846",
            lastInputRecords: 15,
            masterRecords: 15,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "adv191104084317062",
            configName: "TestA1",
            configDesc: "adv191104084317062 TestA1",
            userID: "1",
            createdDateTime: "2019-11-04 03:43:29.58",
            lastModifiedDateTime: "2019-11-04 05:45:45.732",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "success",
            progressPercentage: 0,
            lastStartDateTime: "2019-11-04 05:43:49.78",
            lastEndDateTime: "2019-11-04 05:44:01.566",
            lastInputRecords: 15,
            masterRecords: 15,
            systemConfig: null,
            dedupConfig: null
        },
        {
            processID: "adv191128105553518",
            configName: "TestAAA",
            configDesc: "adv191128105553518 TestAAA",
            userID: "1",
            createdDateTime: "2019-11-28 05:56:00.845",
            lastModifiedDateTime: "2019-11-28 06:21:04.551",
            isActive: 1,
            lastEditUserID: "1",
            processStatus: "success",
            progressPercentage: 0,
            lastStartDateTime: "2020-01-18 02:34:04.565",
            lastEndDateTime: "2020-01-18 02:34:15.933",
            lastInputRecords: 15,
            masterRecords: 15,
            systemConfig: null,
            dedupConfig: null
        }
    ],
    actions:[
        {
            icon: "play_arrow",
            tooltip: "Run",
            onClick: () => {
                console.log("run button is clicked");
            }
        },
        {
            icon: "description",
            tooltip: "Summary",
            onClick: () => {
                console.log("summary button is clicked");
            }
        },
        {
            icon: "edit",
            tooltip: "Edit",
            onClick: (event, row) => {
                // console.log(row.tableData.id);
                //cari indeks
                /*console.log(data[row.tableData.id]);
                //ganti data yang mau diganti
                data[row.tableData.id].configName = "ase";

                //mengembalikan data dengan isi yang sama persis seperti sebelumnya
                setData(data);*/
            }
        },
        {
            icon: "file_copy",
            tooltip: "Clone",
            onClick: () => {
                console.log("clone button is clicked");
            }
        },
        {
            icon: "delete",
            tooltip: "Delete",
            onClick: () => {
                console.log("Delete button is clicked");
            }
        },
        (rowData) => (
            rowData.isActive === 1 ?
                {
                    icon: "visibility_off",
                    tooltip: "Hide Row",
                    onClick: () => {

                        console.log(rowData);
                        // console.log(event);
                        // console.log(row.isActive);
                        console.log(tableConfig.data[rowData.tableData.id].isActive);
                        console.log(rowData.tableData.id);
                        tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
                        setTableConfig(tableConfig);
                        // console.log(row.isActive);

                        /*// console.log(row.tableData.id);
                        //cari indeks
                        console.log(data[row.tableData.id]);
                        //ganti data yang mau diganti
                        data[row.tableData.id].isActive = 0;

                        //mengembalikan data dengan isi yang sama persis seperti sebelumnya
                        setData(data);*/
                    },
                } :
                {
                    icon: "visibility",
                    tooltip: "Show Row",
                    onClick: () => {
                        console.log(rowData);
                        // console.log(event);
                        // console.log(row.isActive);
                        console.log(tableConfig.data[rowData.tableData.id].isActive);
                        console.log(rowData.tableData.id);
                        tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
                        setTableConfig(tableConfig);
                        // console.log(row.isActive);
                    },
                }
        )
    ]
});

и это результат. Пожалуйста, помогите мне. Спасибо.

Code Result

NB: из-за моей репутации. Я не могу разместить изображение здесь. К сожалению

1 Ответ

0 голосов
/ 18 февраля 2020

Прежде всего вы можете разделить массив действий. 

  const actions = [
        {
            icon: "description",
            tooltip: "Run",
            onClick: () => {
                console.log("run button is clicked");
            }
        },
        {
            icon: "description",
            tooltip: "Summary",
            onClick: () => {
                console.log("summary button is clicked");
            }
        },
        {
            icon: "edit",
            tooltip: "Edit",
            onClick: (event, row) => { }
        }, {
            icon: "visibility_off",
            tooltip: "Hide Row",
            onClick: () => { },
        },
        (rowData) => {
            return {
                icon: rowData.isActive === 1 ? 'visibility_off' : 'visibility',
                tooltip: "Hide Row",
                onClick: (event, row) => {
                    clickHandler(row)
                }
            }
        }
    ];
    const [tableConfig, setTableConfig] = React.useState({
        columns: [
            { title: "ID", field: "processID" },
            { title: "Config Name", field: "configName" },
            { title: "Status", field: "processStatus" },
            { title: "Progress", field: "progressPercentage", type: "numeric" },
            { title: "Start Time", field: "lastStartDateTime", type: "datetime" },
            { title: "End Time", field: "lastEndDateTime", type: "datetime" },
            { title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
            { title: "Total Output Records", field: "masterRecords", type: "numeric" },
        ],
        data: [
            {
                processID: "191030070911880",
                configName: "Test2333",
                configDesc: "191030070911880 Test2333",
                userID: "1",
                createdDateTime: "2019-10-30 03:10:06.844",
                lastModifiedDateTime: "2020-01-18 02:24:59.051",
                isActive: 0,
                lastEditUserID: "1",
                processStatus: "success",
                progressPercentage: 0,
                lastStartDateTime: "2020-01-18 02:32:45.976",
                lastEndDateTime: "2020-01-18 02:32:56.197",
                lastInputRecords: 15,
                masterRecords: 15,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "191030072229070",
                configName: "Testimony2",
                configDesc: "191030072229070 Testimony2",
                userID: "1",
                createdDateTime: "2019-10-30 03:22:34.732",
                lastModifiedDateTime: "2019-10-30 03:22:34.732",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "error",
                progressPercentage: 0,
                lastStartDateTime: "2020-01-18 02:32:36.533",
                lastEndDateTime: "2020-01-18 02:32:36.566",
                lastInputRecords: 15,
                masterRecords: 0,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "191030084112873",
                configName: "Testimony3",
                configDesc: "191030084112873 Testimony3",
                userID: "1",
                createdDateTime: "2019-10-30 04:41:19.856",
                lastModifiedDateTime: "2019-10-30 04:41:19.856",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "error",
                progressPercentage: 0,
                lastStartDateTime: "2020-01-18 02:33:59.231",
                lastEndDateTime: "2020-01-18 02:33:59.256",
                lastInputRecords: 15,
                masterRecords: 0,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "191104084001318",
                configName: "TestA",
                configDesc: "191104084001318 TestA",
                userID: "1",
                createdDateTime: "2019-11-04 03:40:44.697",
                lastModifiedDateTime: "2019-11-04 05:45:45.388",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "success",
                progressPercentage: 0,
                lastStartDateTime: "2019-11-04 05:43:56.451",
                lastEndDateTime: "2019-11-04 05:44:06.846",
                lastInputRecords: 15,
                masterRecords: 15,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "adv191104084317062",
                configName: "TestA1",
                configDesc: "adv191104084317062 TestA1",
                userID: "1",
                createdDateTime: "2019-11-04 03:43:29.58",
                lastModifiedDateTime: "2019-11-04 05:45:45.732",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "success",
                progressPercentage: 0,
                lastStartDateTime: "2019-11-04 05:43:49.78",
                lastEndDateTime: "2019-11-04 05:44:01.566",
                lastInputRecords: 15,
                masterRecords: 15,
                systemConfig: null,
                dedupConfig: null
            },
            {
                processID: "adv191128105553518",
                configName: "TestAAA",
                configDesc: "adv191128105553518 TestAAA",
                userID: "1",
                createdDateTime: "2019-11-28 05:56:00.845",
                lastModifiedDateTime: "2019-11-28 06:21:04.551",
                isActive: 1,
                lastEditUserID: "1",
                processStatus: "success",
                progressPercentage: 0,
                lastStartDateTime: "2020-01-18 02:34:04.565",
                lastEndDateTime: "2020-01-18 02:34:15.933",
                lastInputRecords: 15,
                masterRecords: 15,
                systemConfig: null,
                dedupConfig: null
            }
        ],

    });

Как вы можете видеть, я добавил функцию clikHandler() в ваш массив действий. Это для настройки вашего tableconfig. Вы неправильно установили tableConfig. Вы можете проверить, как установить неизменный способ вашего состояния. 

const clickHandler = (rowData) => {
        setTableConfig({
            columns: [...tableConfig.columns],
            data: tableConfig.data.map((item, index) => {
                if (index !== rowData.tableData.id) {
                    return { ...item }
                }
                return {
                    ...item,
                    isActive: item.isActive === 1 ? 0 : 1
                }
            })
        });
    }

Кстати, вы должны изменить свое действие в своей части jsx как actions={actions} Вы можете увидеть рабочий пример Trial

Примечание

В функциональном компоненте setState не претендует на слияние целых состояний. Вы должны объединиться.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...