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

【问题标题】：How to submit the same form multiple times in React如何在 React 中多次提交同一个表单
【发布时间】：2021-12-06 08:45:30
【问题描述】：

我有一个需要多次提交相同表单的 React 应用。下面是我的控制面板类代码。

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

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;

【问题讨论】：

为什么要为同一个动作定义多个<form> 元素？
没有特别的原因 - 我想它可以提高效率，所以我会研究一下，但我的主要问题是如何“取消提交”表单（以便可以重新提交及以上）。
<form> 不是这样工作的，请按照本教程reactjs.org/docs/forms.html 简要了解如何在 RN 中使用
。
所以不能多次提交同一个表单？

标签： javascript html reactjs forms react-native

【解决方案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()”

【讨论】：