材料表反应 - 编辑期间禁用保存

Question

我的页面如下：

    import React, {  useState, useEffect } from "react";
import { getShopConfiguration, updateShopConfiguration } from '../../../api/shopConfig'
import MaterialTable from "material-table";
import Check from '@material-ui/icons/Check';
import Clear from '@material-ui/icons/Clear';
import Edit from '@material-ui/icons/Edit';
import ViewColumn from '@material-ui/icons/ViewColumn';
import { forwardRef } from 'react';

const ConfigurationTable = (props) => {

  const [loadingData, setLoadingData] = useState(true);

  const columns = [
    {
      title: "Type",
      field: "flag",
      editable: 'never'
    },
    {
      title: "Value",
      field: "value",
    }
  ];

  const [data, setData] = useState([]);

  useEffect(() => {

    if (loadingData || props.selectedShop) {
      getConfiguration(props.selectedShop);
    }
  }, [props.selectedShop, loadingData]);



  const getConfiguration = async (shop) => {
    var currentShop
    if (shop) {
      currentShop = shop.value
    }
    
    const response = await (await getShopConfiguration(currentShop)).data;
    setData(response);
    setLoadingData(false);
  }

  const tableIcons = {
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };

  const updateTableData = (newData, oldData) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const dataUpdate = [...data];
        const index = oldData.tableData.id;
        dataUpdate[index] = newData;
        setData([...dataUpdate]);

        resolve();
      }, 300)
    })
  }

  const saveConfig = async () => {
    var currentShop
    if (props.selectedShop) {
      currentShop = props.selectedShop.value
    }
    await updateShopConfiguration(currentShop, data);
  }

  return (

    <div>
      <div><label className="label" >{props.configLabel}</label></div>
      <div>
        {
        {loadingData ? (
          <p>Loading Please wait...</p>
        ) : (
          <MaterialTable
            icons={tableIcons}
            options={{
              toolbar: false,
              paging: false
            }}
            columns={columns}
            data={data}
            editable={{
              onRowUpdate: (newData, oldData) => updateTableData(newData, oldData)

            }}
          />
        )}
      </div>
      <div style={{marginTop:'50px'}}>
      <button onClick = {saveConfig} >Save Changes</button>
      </div>
    </div>

  );
}

export default ConfigurationTable 

当我在表格中的任何行上单击铅笔图标时，在更新列数据时，我希望禁用页面下方的“保存更改”按钮。我该怎么做？

目前，当我单击铅笔图标并在行中编辑/输入一个值时，我可以按“保存更改”，但我需要在我之后启用“保存更改”已单击刻度线/叉号，这意味着我已完成对记录的编辑。

Answer 1

请试试这个代码。我添加了虚拟行来测试并注释了您的 API 调用代码。

import React, { useState, useEffect } from "react";
// import { getShopConfiguration, updateShopConfiguration } from '../../../api/shopConfig'
import MaterialTable from "material-table";
import { Check, Clear, Edit, ViewColumn } from "@material-ui/icons";
import { forwardRef } from "react";

const ConfigurationTable = (props) => {
  const [loadingData, setLoadingData] = useState(true);
  const [isSaveEnabled, setIsSaveEnabled] = useState(false);

  const columns = [
    {
      title: "Type",
      field: "flag",
      editable: "never",
    },
    {
      title: "Value",
      field: "value",
    },
  ];

  const [data, setData] = useState([]);

  useEffect(() => {
    if (loadingData || props.selectedShop) {
      getConfiguration(props.selectedShop);
    }
  }, [props.selectedShop, loadingData]);

  const getConfiguration = async (shop) => {
    var currentShop;
    if (shop) {
      currentShop = shop.value;
    }

    const response = [
      { flag: "a", value: 1 },
      { flag: "b", value: 1 },
      { flag: "c", value: 1 },
      { flag: "d", value: 1 },
    ];

    // const response = await (await getShopConfiguration(currentShop)).data;
    setData(response);
    setLoadingData(false);
  };

  const tableIcons = {
    Check: forwardRef((props, ref) => (
      <Check {...props} onClick={() => setIsSaveEnabled(false)} ref={ref} />
    )),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => (
      <Edit {...props} onClick={() => setIsSaveEnabled(true)} ref={ref} />
    )),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
  };

  const updateTableData = (newData, oldData) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const dataUpdate = [...data];
        const index = oldData.tableData.id;
        dataUpdate[index] = newData;
        setData([...dataUpdate]);

        resolve();
      }, 300);
    });
  };

  const saveConfig = async () => {
    // var currentShop
    // if (props.selectedShop) {
    //   currentShop = props.selectedShop.value
    // }
    // await updateShopConfiguration(currentShop, data);
  };

  return (
    <div>
      <div>
        <label className="label">{props.configLabel}</label>
      </div>
      <div>
        {loadingData ? (
          <p>Loading Please wait...</p>
        ) : (
          <MaterialTable
            icons={tableIcons}
            options={{
              toolbar: false,
              paging: false,
            }}
            columns={columns}
            data={data}
            editable={{
              onRowUpdate: (newData, oldData) =>
                updateTableData(newData, oldData),
            }}
          />
        )}
      </div>
      <div style={{ marginTop: "50px" }}>
        <button disabled={isSaveEnabled} onClick={saveConfig}>
          Save Changes
        </button>
      </div>
    </div>
  );
};

export default ConfigurationTable;