为什么编辑点击对于 MUIDatatable 不起作用？

Question

我在下面的代码中试图实现的是使用 MUIDataTable 向用户提供“编辑”和“添加新记录”选项，但是当我单击“编辑”按钮时，我没有看到模式弹出窗口打开。但是，当我单击“新建”时，它会打开模式弹出窗口。

我需要在模式弹出窗口上显示编辑的记录，并在该模式中提供保存、取消功能。

我是 React 和 MUI 控件的新手，希望得到任何帮助。

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

import {
  Button,
  Select,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  TextField,
  DialogActions
} from "@mui/material";

function ModalBox({ open, handleClose, handleSave, selectedData }) {
  const [state, setState] = useState({
    dname: "",
    dsource: ""
  });

  useEffect(() => {
    if (selectedData) {
      setState({
        dname: selectedData[1],
        dsource: selectedData[2]
      });
    }
  }, [selectedData]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setState((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleEditSave = () => {
    handleSave(state.dname, state.dsource);
  };

  return (
    <div>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Edit Row</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To edit this row, please enter the new values here.
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            name="dname"
            label="Name"
            type="text"
            value={state.dname}
            onChange={handleChange}
            fullWidth
          />
          <TextField
            margin="dense"
            id="provider"
            name="dsource"
            label="Provider"
            type="text"
            value={state.dsource}
            onChange={handleChange}
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleEditSave} color="primary">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

function Companies() {
  const columns = [
    {
      name: "Edit",
      options: {
        filter: false,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta, updateValue) => (
          <Button
            variant="contained"
            color="primary"
            onClick={() => {
              const selectedRow = data.find((row) => row[0] === value);
              setEditModalOpen(true);
              setSelectedData(selectedRow);
            }}
          >
            Edit
          </Button>
        ),
      },
    },
    "Id",
    "Name",
    "Provider",
  ];
  const [data, setData] = useState([]);

  let id = 0;
  function createData(name, provider) {
    id += 1;
    return [id, name, provider];
  }

  useEffect(() => {
    const data = [
      createData("Dummy1", "oracle"),
      createData("Dummy2", "mssql"),
      createData("Dummy3", "oracle"),
    ];
    setData(data);
  }, []);

  const options = {
    filterType: "checkbox",
  };

  const [editModalOpen, setEditModalOpen] = useState(false);
  const [selectedData, setSelectedData] = useState(null);

  const handleSave = (dname, dsource) => {
    const updatedData = data.map((row) => {
      if (row[0] === selectedData[0]) {
        return [row[0], dname, dsource];
      }
      return row;
    });
    setData(updatedData);
    setEditModalOpen(false);
    setSelectedData(null);
  };

  return (
    <div className="f-height fx-column-cont">
      <div>
        <ModalBox
          open={editModalOpen}
          handleClose={() => setEditModalOpen(false)}
          handleSave={handleSave}
          selectedData={selectedData}
        />
        <MUIDataTable
          title={"Test Source"}
          data={data}
          columns={columns}
          options={options}
        />
      </div>
    </div>
  );
}

export default Companies;

Answer 1

我找到了解决方案。这是工作示例，以防有人需要。

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

import {


Button,
  Select,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  TextField,
  DialogActions
} from "@mui/material";

function ModalBox({ open, handleClose, handleSave, selectedData }) {
  const [state, setState] = useState({
    dname: selectedData ? selectedData.dname : "",
    dsource: selectedData ? selectedData.dsource : ""
  });

  useEffect(() => {
    if (selectedData) {
      setState({
        dname: selectedData[1],
        dsource: selectedData[2]
      });
    }
  }, [selectedData]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setState((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleEditSave = () => {
    handleSave(state.dname, state.dsource);
  };

  return (
    <div>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Edit Row</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To edit this row, please enter the new values here.
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            name="dname"
            label="Name"
            type="text"
            value={state.dname}
            onChange={handleChange}
            fullWidth
          />
          <TextField
            margin="dense"
            id="provider"
            name="dsource"
            label="Provider"
            type="text"
            value={state.dsource}
            onChange={handleChange}
            fullWidth
          />
          {selectedData && (
            <div>
              <p>Current Name: {selectedData[1]}</p>
              <p>Current Provider: {selectedData[2]}</p>
            </div>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleEditSave} color="primary">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

function Companies() {
  const columns = [
    {
      name: "Edit",
      options: {
        filter: false,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta, updateValue) => (
          <Button
              variant="contained"
              color="primary"
              onClick={() => {
                const selectedRowIndex = tableMeta.rowIndex;
                const selectedRow = data[selectedRowIndex];
                //alert(JSON.stringify(selectedRow));
                setEditModalOpen(true);
                setSelectedData(selectedRow);
            }}
          >
        Edit
      </Button>
        ),
      },
    },
    "Id",
    "Name",
    "Provider",
  ];
  const [data, setData] = useState([]);

  let id = 0;
  function createData(name, provider) {
    id += 1;
    return [id, name, provider];
  }

  useEffect(() => {
    const data = [
      createData("Dummy1", "oracle"),
      createData("Dummy2", "mssql"),
      createData("Dummy3", "oracle"),
    ];
    setData(data);
  }, []);

  const options = {
    filterType: "checkbox",
  };

  const [editModalOpen, setEditModalOpen] = useState(false);
  const [selectedData, setSelectedData] = useState(null);

  const handleSave = (dname, dsource) => {
    const selectedIndex = data.findIndex((row) => row[0] === selectedData[0]);
    if (selectedIndex !== -1) {
      const updatedRow = [selectedData[0], dname, dsource];
      const updatedData = [...data];
      updatedData[selectedIndex] = updatedRow;
      setData(updatedData);
    }
    setEditModalOpen(false);
    setSelectedData(null);
  };

  return (
    <div className="f-height fx-column-cont">
      <div>
        <ModalBox
          open={editModalOpen}
          handleClose={() => setEditModalOpen(false)}
          handleSave={handleSave}
          selectedData={selectedData}
        />
        <MUIDataTable
          title={"Test Source"}
          data={data}
          columns={columns}
          options={options}
        />
      </div>
    </div>
  );
}

export default Companies;