Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

121
Vistas
How to submit the same form multiple times in React

I have a react app that requires the same form(s) to be submitted multiple times. Below is my code for the control panel class.

The values are entered into separate forms, and the button is pressed, sending the form input field values to another component for processing. After this is done, I would like to be able to re-submit the form (eg: simply click the button again) and for the processing to start over.

The formSubmit field (in this.state) is set to false initially, but set to true when the form is submitted. Once this is done, the {this.state.formSubmit && } line (near the end) ensures that the processing starts when the formSubmit value is set to true. Once the processing is done, I assume that simply setting the formSubmit value to false again will allow for the form to be submitted again, but I do not yet know how to do this.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  BO_course: "",
                    BO_max_speed: "",     
                    formSubmit: false 
                  };
    this.handleInput = this.handleInput.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleInput (event) {
    const value = event.target.value;
    console.log(value);
    this.setState({
      ...this.state,
      [event.target.name]: value,
    });
  }

  handleFormSubmit (event) {
    console.log("Submitting form");
    event.preventDefault();
    this.setState({formSubmit: true});
    // this.setState({formSubmit: false})
  }

  render () {
    return (
      <div className="App">
        <div className="container">
     
          <form onSubmit={this.handleFormSubmit}>
            <label className="name">
              Name
              <input className="inputstyleright"
                type="text"
                name="nameinput"
                onChange={this.handleInput}
              />
            </label>
          </form>
          <form onSubmit={this.handleFormSubmit}>
            <label className="surname">
              Surname
              <input className="inputstyleright"
                type="text"
                name="surnameinput"
                onChange={this.handleInput}
              />
            </label>
            <input className="submitbutton" type="submit" value="Submit"/>
          </form>
        
          <div className="topleft">Control Panel</div>
          <div className="square"></div>
        </div>

        {/* only evaluates to true if the form has been submitted */}
        {this.state.formSubmit && <RM search1={this.state} />}
      </div>
    );
  }
}

export default App;
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I managed to solve it by updating the button to use an onClick function:

<input className="submitbutton" type="submit" value="Submit" onClick={()=>getRM(this.state)}/>

and changing

{this.state.formSubmit && <RM search1={this.state} />}

to just

{<RM />}

I also moved the function I was calling in the

<RM search1={this.state} />

part outside of the RM class itself. The function is now called by the onClick in the button eg: "getRM()"

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda