rad*_*ive 4 javascript reactjs
我创建了一个reactJs页面,允许管理员将用户添加到平台.现在,管理员可以在提交表单之前添加尽可能多的用户,而不是为每个新用户提交表单.默认情况下,会显示一个包含输入字段的表格行,然后在单击"添加"按钮时,会添加一个新行,管理员可以填写必要的详细信息.
我想在每个新行的输入字段中添加一个onChange事件.我不知道怎么做,因为这是非常有活力的.添加新行时,状态必须更改.我不知道如何更新此状态并为每行中的每个字段添加onChange事件.这是我现有的代码:
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);
this.removeRow = this.removeRow.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)
});
}
removeRow(index){
var array = this.state.rows;
array.splice(index, 1)
this.setState({
rows : array
})
}
fetchRows(){
return this.state.rows.map((row, index) => (
//console.log(row, index)
<tr key={row}>
<td className="text-center">
<button type="button" onClick={(e)=> this.removeRow(index)} 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" onChange={}/>
</td>
<td>
<input type="text" className="form-control" onChange={}/>
</td>
<td>
<input type="text" className="form-control" onChange={}/>
</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>
);
}
}
您可以创建一个方法,onChange这需要在event与index那得到了改变该行,并使用name和value的input一种改变与组合index的row数组中找出更新的内容领域.
例
class Admins extends React.Component {
state = {
errors: "",
success: "",
rows: []
};
addRow = () => {
this.setState(previousState => {
return {
rows: [...previousState.rows, { name: "", email: "", password: "" }]
};
});
};
removeRow = index => {
this.setState(previousState => {
const rows = [...previousState.rows];
rows.splice(index, 1);
return { rows };
});
};
onChange = (event, index) => {
const { name, value } = event.target;
this.setState(previousState => {
const rows = [...previousState.rows];
rows[index] = { ...rows[index], [name]: value };
return { rows };
});
};
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) => (
<tr key={row}>
<td className="text-center">
<button
type="button"
onClick={e => this.removeRow(index)}
data-toggle="tooltip"
className="btn btn-xs btn-danger"
data-original-title=""
>
<i className="fa fa-trash" />
</button>
</td>
<td>
<input
type="text"
name="name"
className="form-control"
value={row.name}
onChange={e => this.onChange(e, index)}
/>
</td>
<td>
<input
type="text"
name="email"
className="form-control"
value={row.email}
onChange={e => this.onChange(e, index)}
/>
</td>
<td>
<input
type="text"
name="password"
className="form-control"
value={row.password}
onChange={e => this.onChange(e, index)}
/>
</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>
);
}
}
| 归档时间： |
|
| 查看次数： |
905 次 |
| 最近记录： |