Javascript 在reactJs中动态添加表行时出错
我正在尝试创建一个reactJs页面，允许管理员向平台添加用户。现在，我希望管理员在提交表单之前能够添加尽可能多的用户，而不是为每个新用户提交表单。默认情况下，显示一个包含输入字段的表格行，然后单击add按钮，添加一个新行，管理员可以填写必要的详细信息。但是，我无法让我的页面显示默认行，添加按钮也不起作用，不幸的是，我的页面没有抛出错误。这是我的密码：Javascript 在reactJs中动态添加表行时出错,javascript,reactjs,Javascript,Reactjs,我正在尝试创建一个reactJs页面，允许管理员向平台添加用户。现在，我希望管理员在提交表单之前能够添加尽可能多的用户，而不是为每个新用户提交表单。默认情况下，显示一个包含输入字段的表格行，然后单击add按钮，添加一个新行，管理员可以填写必要的详细信息。但是，我无法让我的页面显示默认行，添加按钮也不起作用，不幸的是，我的页面没有抛出错误。这是我的密码： export default class Admins extends React.Component{ constructor(pro
export default class Admins extends React.Component{
constructor(props){
super(props);
this.state = {
errors : '',
success : '',
rows : [1]
}
this.addRow = this.addRow.bind(this);
this.fetchRows = this.fetchRows.bind(this);
}
addRow(){
var last = this.state.rows[this.state.rows.length-1];
var current = last + 1;
this.setState({
rows : this.state.rows.concat(current)
});
}
fetchRows(){
this.state.rows.map((row, index) => (
//console.log(row, index)
<tr key={row}>
<td className="text-center">
<button type="button" data-toggle="tooltip" className="btn btn-xs btn-danger"
data-original-title=""><i className="fa fa-trash"></i>
</button>
</td>
<td>
<input type="text" className="form-control"/>
</td>
<td>
<input type="text" className="form-control"/>
</td>
<td>
<input type="text" className="form-control"/>
</td>
</tr>
));
}
render(){
return(
<div>
<Top/>
<SideBar/>
<div className="breadcrumb-holder">
<div className="container-fluid">
<ul className="breadcrumb">
<li className="breadcrumb-item"><Link to="/">Dashboard</Link></li>
<li className="breadcrumb-item active">Admins</li>
</ul>
</div>
</div>
<section className="forms">
<div className="container-fluid">
<header>
<h3 className="h5 display">Admins</h3>
</header>
<div className="row">
<div className="col-lg-6">
<h5 className="text-danger">{this.state.errors}</h5>
<h5 className="text-success">{this.state.success}</h5>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div className="card">
<div className="card-header d-flex align-items-center">
<h5></h5>
</div>
<div className="card-body">
<table className="table table-bordered">
<thead>
<tr>
<th width="5%">Actions</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
{this.fetchRows()}
<tr>
<td className="text-center">
<button type="button" onClick={this.addRow} data-toggle="tooltip" className="btn btn-xs btn-primary"
data-original-title=""><i className="fa fa-plus"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
}
导出默认类管理员扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：“”，
成功：''，
行：[1]
}
this.addRow=this.addRow.bind（this）；
this.fetchRows=this.fetchRows.bind（this）；
}
addRow（）{
var last=this.state.rows[this.state.rows.length-1]；
无功电流=最后一次+1；
这是我的国家({
行：this.state.rows.concat（当前）
});
}
fetchRows（）{
this.state.rows.map（（行，索引）=>(
//console.log（行，索引）
));
}
render（）{
返回(
仪表板
管理员
管理员
{this.state.errors}
{this.state.success}
行动
名称
电子邮件
密码
{this.fetchRows（）}
);
}
}
fetchRowsrenderclass Admins extends React.Component {
state = {
errors: "",
success: "",
rows: [1]
};
addRow = () => {
var last = this.state.rows[this.state.rows.length - 1];
var current = last + 1;
this.setState({
rows: this.state.rows.concat(current)
});
};
render() {
return (
<div>
<div className="breadcrumb-holder">
<div className="container-fluid">
<ul className="breadcrumb">
<li className="breadcrumb-item active">Admins</li>
</ul>
</div>
</div>
<section className="forms">
<div className="container-fluid">
<header>
<h3 className="h5 display">Admins</h3>
</header>
<div className="row">
<div className="col-lg-6">
<h5 className="text-danger">{this.state.errors}</h5>
<h5 className="text-success">{this.state.success}</h5>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div className="card">
<div className="card-header d-flex align-items-center">
<h5 />
</div>
<div className="card-body">
<table className="table table-bordered">
<thead>
<tr>
<th width="5%">Actions</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
{this.state.rows.map((row, index) => (
//console.log(row, index)
<tr key={row}>
<td className="text-center">
<button
type="button"
data-toggle="tooltip"
className="btn btn-xs btn-danger"
data-original-title=""
>
<i className="fa fa-trash" />
</button>
</td>
<td>
<input type="text" className="form-control" />
</td>
<td>
<input type="text" className="form-control" />
</td>
<td>
<input type="text" className="form-control" />
</td>
</tr>
))}
<tr>
<td className="text-center">
<button
type="button"
onClick={this.addRow}
data-toggle="tooltip"
className="btn btn-xs btn-primary"
data-original-title=""
>
<i className="fa fa-plus" />
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
}
类管理员扩展React.Component{
状态={
错误：“”，
成功：“，
行：[1]
};
addRow=（）=>{
var last=this.state.rows[this.state.rows.length-1]；
无功电流=最后一次+1；
这是我的国家({
行：this.state.rows.concat（当前）
});
};
render（）{
返回(
管理员
管理员
{this.state.errors}
{this.state.success}
行动
名称
电子邮件
密码
{this.state.rows.map（（行，索引）=>(
//console.log（行，索引）
))}
);
}
}