Question

我的桌子还有问题。我想使用dialogpanel将新元素添加到我的数据库，但是当我单击添加按钮时，我有这个错误。

index.js:16 Warning: Failed prop type: 
Invalid prop `className` of type `object supplied to `m`, expected `string`.
            in m (created by WithStyles(m))
            in WithStyles(m) (created by h)
            in div (created by p)
            in p (created by WithStyles(p))
            in WithStyles(p) (created by h)
            in header (created by h)
            in h (created by WithStyles(h))
            in WithStyles(h) (created by h)
            in h (created by WithStyles(h))
            in WithStyles(h) (created by h)
            in div (created by h)
            in h (created by t)
            in div (created by t)
            in t

我在这里添加了一些代码 question

这是dialogPanel和table的代码。我认为一定有问题（可能在进口中？）

对话框代码：

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 {dataTable} from "./NextPersonTable";

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

    }
    addPersonToDatabase(personProps) {
        fetch('http://localhost:9090/people',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin': '*',
                    'mode': 'no-corse',
                },
                body: JSON.stringify(personProps)
            }).then(
            resp => window.location.reload()
        ).catch(err => console.error(err))
    }


    publish() {
        console.log("Data:" + this.state.name, this.state.lastname, this.state.location, this.state.email, this.state.status, this.state.role);
        this.addPersonToDatabase(dataTable(this.state.name, this.state.lastname, this.state.location, this.state.email, this.state.status, this.state.role));
    }



    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;

我的表格代码：

import React from 'react';
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: '10%',
        marginTop: theme.spacing.unit * 3,
        overflowX: 'auto',
        color: 'red',
    },
    table: {
        minWidth: '100',
    },

});

let id = 0;

export function dataTable(firstName, lastName, location, mail, status, role) {
    id += 1;
    return {id, firstName, lastName, location, mail, status, role};
}


class NextPersonTable extends React.Component {
    constructor() {
        super();
        this.state = {
            personData: []
        }
    }

    componentDidMount() {
        this.fetchTableData();
    }

    fetchTableData() {
        fetch('http://localhost:9090/people')
            .then(response => response.json())
            .then(data => {
                this.setState({personData: data});
            });
    }

    render() {
        return (
            <Paper>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell style={styles.head}>ID:</TableCell>
                            <TableCell style={styles.head}>Name:</TableCell>
                            <TableCell style={styles.head}>Lastname</TableCell>
                            <TableCell style={styles.head}>Location</TableCell>
                            <TableCell style={styles.head}>Email</TableCell>
                            <TableCell style={styles.head}>Status</TableCell>
                            <TableCell style={styles.head}>Role</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {this.state.personData.map(n => {
                            return (
                                <TableRow key={n.id}>
                                    <TableCell style={styles.innerRow} component="th" scope="row">
                                        {n.id}
                                    </TableCell>
                                    <TableCell>{n.firstName}</TableCell>
                                    <TableCell>{n.lastName}</TableCell>
                                    <TableCell>{n.location}</TableCell>
                                    <TableCell>{n.email}</TableCell>
                                    <TableCell>{n.status}</TableCell>
                                    <TableCell>{n.role}</TableCell>
                                </TableRow>
                            );
                        })}
                    </TableBody>
                </Table>
            </Paper>
        );
    }
}


export default withStyles(styles)(NextPersonTable);

Answer 1

当您使用特定的withStyles并将样式传递给它时，您的组件将获得一个道具classes，您可以使用它来为您的组件分配类，如下所示：

<TableCell className={this.props.classes.innerRow} component="th" scope="row">

问题在于，您没有传递您正在使用的样式（head和innerRow缺失）

并且您将这些类分配给内联样式而不是使用className

如何使用ReactJS向表中添加新元素

1 个答案: