Блог

я новичок в мире 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 объектов в серверную часть.
Заранее благодарю вас за ваше время

Я предполагаю, что вам нужно что-то, что есть в угловых формах. Вы можете каждый раз помещать данные формы в массив объектов формы в вашем методе onValidSubmit. что-то вроде этого:

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

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

Затем внедрите кнопку для отправки formObjects на сервер.