Использование модальных для добавления новых данных в mui-datatable - PullRequest
Новая
       63

Использование модальных для добавления новых данных в mui-datatable

0 голосов
/ 05 марта 2019

Мне нужно создать новые данные, используя модальное окно, и вот как я это реализовал, но, очевидно, новые данные не добавляются в таблицу данных.Это способ сделать это?

Вот мой код: 

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;

Мне кажется, проблема в том, что у меня есть глобальный массив, и я пытаюсь вставить новые данные в функцию.Есть ли способ обойти это?Спасибо за любые советы, которые вы можете дать по этому вопросу.

...