Question

我创建了一个表和对话框面板。我想在我的表中添加新元素，但它不起作用。我不知道哪里弄错了。这是我的表：

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};
}

export var dataTable = [
    createData('Jan', 'mucha', 'krakow', 'mail@mail', 'remote', 'admin'),
    createData('Jan', 'mucha', 'krakow', 'mail@mail', 'remote', 'admin'),
    createData('Jan', 'mucha', 'krakow', 'mail@mail', 'remote', 'admin'),
    createData('Jan', 'mucha', 'krakow', 'mail@mail', 'remote', 'admin'),
];

function NextPersonTable(props) {
    const {classes} = props;

    return (
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell className={classes.head}>ID:</TableCell>
                        <TableCell className={classes.head} numeric>Name:</TableCell>
                        <TableCell className={classes.head} numeric>Lastname</TableCell>
                        <TableCell className={classes.head} numeric>Location</TableCell>
                        <TableCell className={classes.head} numeric>Email</TableCell>
                        <TableCell className={classes.head} numeric>Status</TableCell>
                        <TableCell className={classes.head} numeric>Role</TableCell>

                    </TableRow>
                </TableHead>
                <TableBody>
                    {dataTable.map(n => {
                        return (
                            <TableRow key={n.id}>
                                <TableCell className={classes.innerRow} component="th" scope="row">
                                    {n.id}
                                </TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.name}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.lastname}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.location}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.email}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.status}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.role}</TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </Paper>
    );
}

NextPersonTable.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NextPersonTable);

这是我的对话框面板代码，我准备元素＆＃39;添加：

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";
import {createData, dataTable} from "./NextPersonTable";
import Persons from "./Persons.jsx";
import ReactDOM from "react-dom";

class DialogPanel extends React.Component {
    constructor() {
        super();
        this.state = {
            open: false,
            name: '',
            lastname: '',
            location: '',
            email: '',
            status: '',
            role: '',
        };
        this.handleClickOpen = () => {
            this.setState({open: true});
        };

        this.handleClose = () => {
            this.setState({open: false});
            this.publish();
        };
    }
    handleChanges({target}) {
        this.setState(
            {
                [target.name]: target.value
            }
        )

    }

    publish() {
        console.log("Data:" + this.state.name, this.state.lastname, this.state.location, this.state.email, this.state.status, this.state.role);
        dataTable.push(createData(this.state.name, this.state.lastname, this.state.location, this.state.email, this.state.status, this.state.role));
        ReactDOM.render(<Persons/>, document.getElementById('app'));
    }


    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"
                            name="name"
                            label="Name"
                            type="text"
                            fullWidth
                            value={this.state.name}
                            onChange={this.handleChanges.bind(this)}

                        />
                        <TextField
                            autoFocus
                            margin="dense"
                            name="lastname"
                            label="Lastname"
                            type="text"
                            fullWidth
                            value={this.state.lastname}
                            onChange={this.handleChanges.bind(this)}

                        />
                        <TextField
                            autoFocus
                            margin="dense"
                            name="location"
                            label="Location"
                            type="text"
                            fullWidth
                            value={this.state.location}
                            onChange={this.handleChanges.bind(this)}

                        />
                        <TextField
                            autoFocus
                            margin="dense"
                            name="email"
                            label="Email"
                            type="text"
                            fullWidth
                            value={this.state.email}
                            onChange={this.handleChanges.bind(this)}

                        />
                        <TextField
                            autoFocus
                            margin="dense"
                            name="status"
                            label="Status"
                            type="text"
                            fullWidth
                            value={this.state.status}
                            onChange={this.handleChanges.bind(this)}

                        />
                        <TextField
                            autoFocus
                            margin="dense"
                            name="role"
                            label="Role"
                            type="text"
                            fullWidth
                            value={this.state.role}
                            onChange={this.handleChanges.bind(this)}

                        />
                    </DialogContent>
                    <DialogActions>
                        <Button variant="raised" 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;

不幸的是，当我点击保存按钮时，我的mew元素没有添加到表格中。我有一个其他的jsx类，我在一个主类中连接我的所有项目：

import React from 'react';
import NextPersonTable from './NextPersonTable.js';
import {AppBar} from '@material-ui/core/';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import spacing from "@material-ui/core/es/styles/spacing";
import DialogPanel from "./DialogPanel";




class Persons extends React.Component {

    render() {
        return (
            <div>
                <ButtonNavigation/>
                <NextPersonTable/>
                <DialogPanel/>
            </div>

        );
    }

}

const ButtonNavigation = () => {
    return (
        <div className={styles2.root}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton className={styles2.menuButton} color="inherit" aria-label="Menu">
                        <MenuIcon/>
                    </IconButton>
                </Toolbar>
            </AppBar>
        </div>
    );
};
const styles2 = {
    root: {
        flexGrow: 1,
    },
    flex: {
        flex: 1,
    },
    menuButton: {
        float: 'left',
        marginLeft: -12,
        marginRight: 20,
    },
    button: {
        margin: spacing.unit,
    },
};


export default Persons;

我不知道错误在哪里，因为我试图把我应有的东西都做到。我的应用中的其他文件：的index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>React App</title>
</head>

<body>
<div id="app"></div>
<script src="index.js"></script>
</body>

</html>

我的main.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import Persons from './Persons.jsx';

ReactDOM.render(<Persons/>, document.getElementById('app'));

React js applicationd不会向表中添加数据

0 个答案: