Блог

Главная - Вопросы по программированию - Как отправить одну и ту же форму несколько раз в React

Как отправить одну и ту же форму несколько раз в React

#javascript #html #reactjs #forms #react-native

Вопрос:

У меня есть приложение react, которое требует отправки одной и той же формы(форм) несколько раз. Ниже приведен мой код для класса панели управления.

Значения вводятся в отдельные формы, и кнопка нажимается, отправляя значения полей ввода формы другому компоненту для обработки. После того, как это будет сделано, я хотел бы иметь возможность повторно отправить форму (например: просто нажмите кнопку еще раз) и начать обработку заново.

Поле formSubmit (в этом состоянии) изначально имеет значение false, но при отправке формы имеет значение true. Как только это будет сделано, строка {this.state.formSubmitamp;amp;} (ближе к концу) гарантирует, что обработка начнется, когда значение 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 amp;amp; <RM search1={this.state} />}
      </div>
    );
  }
}

export default App;

Комментарии:

1. Почему вы определили несколько <form> элементов для одного и того же действия?

2. Без особой причины — я полагаю, что это можно сделать более эффективным, поэтому я рассмотрю это, но мой главный вопрос заключается в том, как «отменить» форму (чтобы ее можно было повторно отправлять снова и снова).

3. <form> так не работает, следуйте этому руководству reactjs.org/docs/forms.html чтобы получить краткое описание того, как использовать <форма><форма></форма> в RN.

4. Таким образом, невозможно отправить одну и ту же форму несколько раз?

Ответ №1:

Мне удалось решить эту проблему, обновив кнопку, чтобы использовать функцию onClick:

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

и меняется

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

чтобы просто

 {<RM />}

Я также переместил функцию, которую вызывал, в

 <RM search1={this.state} />

часть вне самого класса RM. Функция теперь вызывается нажатием кнопки, например: «getRM ()».

Метки: