如何在React中多次提交同一个表单

Question

我有一个react应用程序，需要相同的形式(s)多次提交。下面是控制面板类的代码。

将值输入到单独的表单中，按下按钮，将表单输入字段值发送到另一个组件进行处理。完成后，我希望能够重新提交表单(例如:只需再次单击按钮)，并重新开始处理。

formSubmit字段(在this.state中)最初设置为false，但在提交表单时设置为true。完成此操作后，{this.state。formSubmit,,}行(接近末尾)确保处理在formSubmit值被设置为true时开始。一旦处理完成，我假设简单地将formSubmit值再次设置为false将允许再次提交表单，但我还不知道如何做到这一点。

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;

Answer 1

我设法通过更新按钮来使用onClick函数来解决这个问题:

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

和

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

{<RM />}

我还移动了我在

中调用的函数

<RM search1={this.state} />

部分在RM类本身之外。该函数现在由按钮中的onClick调用，例如:"getRM()">