使用 modal 向 mui-datatable 添加新数据

Question

我需要使用模态框创建一个新数据，这就是我实现它的方式，但显然新数据没有添加到数据表中。他们有办法做到这一点吗？

这是我的代码：

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

const data = [
  createData("Dummy1", "oracle"),
  createData("Dummy2", "mssql"),
  createData("Dummy3", "oracle"),
];


function ModalBox(props){
  const [open, setOpen] = React.useState(false);
  const [state, setState] = React.useState({
    dname: '',
    dsource: '',
    data
  })

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

  const handleClickOpen = () => {
    setOpen(true);
  }

  const handleClose = () => {
    setOpen(false);
  }

  const addDataSource = () =>{
    data.push(createData(state.dname, state.dsource));
    setOpen(false);
  }

  return(
    <div>
      <Button variant="contained" color="primary" onClick={handleClickOpen}>
        Create New
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
      <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
          <DialogContent>
            <DialogContentText>
              To subscribe to this website, please enter your email address here. We will send
              updates occasionally.
            </DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="name"
              label="Name"
              type="text"
              value={state.dname || ''}
              onChange={handleChange('dname')}
              fullWidth
            />
            <Select
              native
              fullWidth
              value={state.dsource || ''}
              onChange={handleChange('dsource')}
            >
              <option value="" />
              <option value={'mssql'}>mssql</option>
              <option value={'oracle'}>oracle</option>
            </Select>
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={addDataSource} color="primary">
              Add
            </Button>
          </DialogActions>
      </Dialog>
    </div>
  );
}

function TestSource(){

  const columns = ["Id", "Name", "Provider"];

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

  return(
    <div className="f-height fx-column-cont">
      <MainToolbar/>
      <Container>
        <ModalBox/>
        <MUIDataTable
          title={"Test Source"}
          data={data}
          columns={columns}
          options={options}
        />  
      </Container> 
    </div>
  );
}

export default TestSource;

我认为问题在于我有一个全局数组，我尝试在函数中推送新数据。有没有办法解决这个问题？感谢您对此提供的任何建议。

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 "@material-ui/core";
import "./styles.css";

function ModalBox(props) {
  const [open, setOpen] = useState(false);
  const [state, setState] = useState({
    dname: "",
    dsource: ""
  });

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

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={handleClickOpen}>
        Create New
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To subscribe to this website, please enter your email address here.
            We will send updates occasionally.
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Name"
            type="text"
            value={state.dname || ""}
            onChange={handleChange("dname")}
            fullWidth
          />
          <Select
            native
            fullWidth
            value={state.dsource || ""}
            onChange={handleChange("dsource")}
          >
            <option value="" />
            <option value={"mssql"}>mssql</option>
            <option value={"oracle"}>oracle</option>
          </Select>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button
            onClick={() => {
              props.addDataSource(state.dname, state.dsource);
              setOpen(false);
            }}
            color="primary"
          >
            Add
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

function App() {
  const columns = ["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 addDataSource = (dname, dsource) => {
    const updated = [...data];
    updated.push(createData(dname, dsource));
    setData(updated);
  };

  return (
    <div className="f-height fx-column-cont">
      <div>
        <ModalBox
          addDataSource={(dname, dsource) => addDataSource(dname, dsource)}
        />
        <MUIDataTable
          title={"Test Source"}
          data={data}
          columns={columns}
          options={options}
        />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我还建议为组件创建不同的文件并进行一些重构和清理 :-) 希望有所帮助。