Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

116
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda