如何允许输入 N 次相同的数据？答案

【问题标题】：How can I allow the same data to be entered N times?如何允许输入 N 次相同的数据？
【发布时间】：2020-09-12 03:07:31
【问题描述】：

我是 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 个对象返回到后端。提前感谢您的宝贵时间

【问题讨论】：

你能举个例子吗？

标签： javascript html reactjs forms

【解决方案1】：

我假设您需要 Angular 表单具有的东西。您可以每次将表单数据推送到表单对象数组中 onValidSubmit 方法。像这样：

state = {
 formObjects: [],
 currentFormData: {nome: ''}
}

onValidSubmit = () => {
 const { formObjects, currentFormData} = this.state;
 this.setState({
  formObjects: [...formObjects, currentFormData],
  currentFormData: {nome: ''}
 })
}

然后实现一个 Button 将 formObjects 提交给服务器。

【讨论】：