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;
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()"