我的 table 仍然有问题。我想使用对话框面板向数据库添加新元素，但是当我单击“添加”按钮时出现此错误。
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和表格的代码。我认为一定有问题(也许是进口？)
对话框代码:
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);
最佳答案
当您使用特殊的 withStyles 并将样式传递给它时，您的组件将获得一个 prop classes ，您可以使用它为组件分配类，如下所示:
<TableCell className={this.props.classes.innerRow} component="th" scope="row">
这里的问题是，您没有传递您正在使用的样式(缺少 head 和 innerRow)
并且您将这些类分配给内联样式，而不是使用 className
关于javascript - 如何使用 ReactJS 向表添加新元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50679558/