Witam,
chciałabym zamontować mechanizm który wstawia elementy wpisane w dialog panelu do odpowiednich rubryk w tabeli. Po wciśnięciu przycisk dodaj, miałby wstawiać te elementy.
Mam przygotowany dialog panel z odpowiednimi polami tekstowymi. Pokażę skróconą wersję tylko z jednym polem:
import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import AddIcon from '@material-ui/icons/Add';
import Save from "@material-ui/icons/es/Save";
import Delete from "@material-ui/icons/es/Delete";
class DialogPanel extends React.Component {
constructor() {
super()
this.state = {
open: false,
name: '',
};
this.handleClickOpen = () => {
this.setState({open: true});
};
this.handleClose = () => {
this.setState(
{
open: false,
name: 'Jan',
},
)
;
};
}
render() {
return (
<div style={{marginTop: '15px'}}>
<Button variant="raised" color="primary" aria-label="add"
onClick={this.handleClickOpen}><AddIcon/></Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Adding person to table: </DialogTitle>
<DialogContent>
<DialogContentText>
Pleas fill data.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Name"
type="text"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button variant="raised" color="primary" onClick={this.handleClose} color="secondary">
Cancel
<Delete/>
</Button>
<Button variant="raised" size="small" onClick={this.handleClose} color="primary">
Save
<Save/>
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
export default DialogPanel;
I teraz chiałabym żeby po uzupełnieniu rubryki name ten element lądował do mojej tabelki.
Kod tabelki:
import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
});
let id = 0;
function createData(name, lastname, location, email, status, role) {
id += 1;
return {name, lastname, location, email, status, role};
}
const data = [
createData('Jan'),
];
function NextPersonTable(props) {
const {classes} = props;
return (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => {
return (
<TableRow key={n.id}>
<TableCell component="th" scope="row">
{n.name}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
NextPersonTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(NextPersonTable);
Nie zabardzo wiem jak taki kod powinien wyglądać no i gdzie ten mechanizm umieścić. W dialog panelu znajdują sie przyciski.
Pozdrawiam i z góry dziękuje za pomoc