Tengo una aplicación de reacción que requiere que se envíen los mismos formularios varias veces. A continuación se muestra mi código para la clase del panel de control.
Los valores se ingresan en formularios separados y se presiona el botón, lo que envía los valores del campo de entrada del formulario a otro componente para su procesamiento. Una vez hecho esto, me gustaría poder volver a enviar el formulario (por ejemplo: simplemente haga clic en el botón nuevamente) y que el procesamiento comience de nuevo.
El campo formSubmit (en this.state) se establece en falso inicialmente, pero se establece en verdadero cuando se envía el formulario. Una vez hecho esto, la línea {this.state.formSubmit && } (cerca del final) garantiza que el procesamiento comience cuando el valor de formSubmit se establezca en verdadero. Una vez que se realiza el procesamiento, asumo que simplemente establecer el valor de formSubmit en falso nuevamente permitirá que el formulario se envíe nuevamente, pero aún no sé cómo hacerlo.
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;Logré resolverlo actualizando el botón para usar una función onClick:
<input className="submitbutton" type="submit" value="Submit" onClick={()=>getRM(this.state)}/>y cambiando
{this.state.formSubmit && <RM search1={this.state} />}para sólo
{<RM />}También moví la función que estaba llamando en el
<RM search1={this.state} />parte fuera de la propia clase RM. La función ahora es llamada por onClick en el botón, por ejemplo: "getRM ()"