Javascript 如何使用ReactJS向表中添加新元素
我的桌子还是有问题。我想使用dialogpanel向数据库添加新元素，但当我单击“添加”按钮时出现此错误Javascript 如何使用ReactJS向表中添加新元素,javascript,reactjs,Javascript,Reactjs,我的桌子还是有问题。我想使用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) (create
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
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;
从“React”导入React；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“@material ui/icons/Add”导入AddIcon；
从“@material ui/icons/es/Save”导入保存；
从“@material ui/icons/es/Delete”导入删除；
从“/NextPersonTable”导入{dataTable}；
类DialogPanel扩展了React.Component{
构造函数（）{
超级（）；
此.state={
开：错，
名称：“”，
姓氏：“”，
位置：“”，
电子邮件：“”，
状态：“”，
角色：“”，
};
this.handleClickOpen=（）=>{
this.setState（{open:true}）；
};
this.handleClose=（）=>{
this.setState（{open:false}）；
这个。publish（）；
};
}
handleChanges（{target}）{
这是我的国家(
{
[target.name]：target.value
}
)
}
addPersonToDatabase（personProps）{
取（'http://localhost:9090/people',
{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“*”，
“模式”：“无corse”，
},
正文：JSON.stringify（personProps）
}).那么(
resp=>window.location.reload（）
).catch（err=>console.error（err））
}
发布（）{
log（“数据：+this.state.name，this.state.lastname，this.state.location，this.state.email，this.state.status，this.state.role）；
this.addPersonToDatabase（数据表（this.state.name，this.state.lastname，this.state.location，this.state.email，this.state.status，this.state.role））；
}
render（）{
返回(
将人员添加到表中：
请填写数据。
取消
拯救
);
}
}
导出默认对话框面板；
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);
从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
常量样式=主题=>({
根目录：{
宽度：“10%”，
marginTop:theme.space.unit*3，
溢出x:'自动'，
颜色：“红色”，
},
表:{
最小宽度：“100”，
},
});
设id=0；
导出函数数据表（名字、姓氏、位置、邮件、状态、角色）{
id+=1；
返回{id，firstName，lastName，位置，邮件，状态，角色}；
}
类NextPersonTable扩展React.Component{
构造函数（）{
超级（）；
此.state={
个人资料：[]
}
}
componentDidMount（）{
这是fetchTableData（）；
}
fetchTableData（）{
取（'http://localhost:9090/people')
.then（response=>response.json（））
。然后（数据=>{
this.setState（{personData:data}）；
});
}
render（）{
返回(
身份证件：
姓名：
姓氏
地方
电子邮件
地位
角色
{this.state.personData.map（n=>{
返回(
{n.id}
{n.firstName}
{n.lastName}
{n.location}
{n.email}
{n.status}
{n.role}
);
})}
);
}
}
导出默认样式（样式）（NextPersonTable）；
并将样式传递给它时，您的组件将获得一个propclasses
，您可以使用它为组件分配类，如下所示：
<TableCell className={this.props.classes.innerRow} component="th" scope="row">
这里的问题是，您没有传递正在使用的样式（head
和innerRow
缺失）
您正在将这些类指定给内联styl