javascript - 如何允许输入 N 次相同的数据?
问题描述
我是 js 世界的新手,我想知道:在 React 表单中,我怎样才能允许输入相同的数据 N 次?
render() {
if (localStorage.getItem("email") === null) {
history.push("/403");
window.location.reload();
} else {
return (
<div>
<Header />
<div className="panelloRegistrazione body">
<br></br>
<div
class="row h-100 justify-content-md-center"
style={{ minHeight: "83vh" }}
>
<div class="col-sm-12 col-md-8 col-lg-6 my-auto">
<Jumbotron>
<Container fluid>
<center>
<h2 style={{ color: "black" }}>Caricamento documenti</h2>
<FaFileUpload color="black" size="200px" />
</center>
<AvForm onValidSubmit={this.onValidSubmit}>
<AvField
autofocus
name="nome"
type="text"
label="Nome"
placeholder="Es: Mario"
onChange={this.handleChange("nome")}
errorMessage="Non sembra tu abbia inserito un nome"
required
/>
<AvField
autofocus
name="cognome"
type="text"
label="Cognome"
placeholder="Es: Rossi"
onChange={this.handleChange("cognome")}
errorMessage="Non sembra tu abbia inserito un cognome"
required
/>
<AvField
autofocus
name="luogoNascita"
type="text"
label="Luogo di nascita"
placeholder="Es: Palermo"
onChange={this.handleChange("luogoNascita")}
required
/>
<span>Data di nascita</span>
<AvField
name="dataNascita"
onChange={this.handleChange("dataNascita")}
type="date"
/*min={this.state.minCheckinDate}
max={this.state.checkOut}*/
onfocus="(this.type='date')"
errorMessage="Data non valida"
validate={{
required: {
value: true,
errorMessage: "Data mancante",
},
}}
/>
<label>
Carica documento di riconoscimento
<br />
<input type="file" onChange={this.onChangeHandler} />
</label>
<center>
<Button type="submit" color="danger">
Registra
</Button>
</center>
<br />
</AvForm>
</Container>
</Jumbotron>
</div>
</div>
</div>
<Footer />
</div>
);
}
}
目前,这是页面渲染:我制作了一个允许插入一次的经典表单,我该如何集成?具体来说,我想将 N 个对象返回到后端。提前感谢您的时间
解决方案
我假设您需要 Angular 表单具有的东西。您可以每次在 onValidSubmit 方法中将表单数据推送到表单对象数组中。像这样的东西:
state = {
formObjects: [],
currentFormData: {nome: ''}
}
onValidSubmit = () => {
const { formObjects, currentFormData} = this.state;
this.setState({
formObjects: [...formObjects, currentFormData],
currentFormData: {nome: ''}
})
}
然后实现一个 Button 以将 formObjects 提交给服务器。
推荐阅读
- asp.net - 如何安排定期下载
- node.js - 在 Node.js 中使用 Winston 在 JSON 对象中输出日志
- javascript - 所有具有类名的元素在 JS 中都有 html
- windows - 用于删除以“。”开头的文件夹的 Powershell 脚本 不起作用 - 为什么?
- html - 如何有条件地将css应用于不同的嵌套内容
- osgi - 如何在 OSGI 注释中配置 servlet 资源类型
- r - 如何解决 R 光栅镶嵌错误:“数据”必须是矢量类型,是否为“NULL”?
- mocha.js - 测试用例内部的`before`钩子(`it`)
- mongodb - 在 Power BI 中将 MongoDB id 转换为日期时间
- powershell - 自动化 Powershell 凭据以更改域和名称