Код события не выполняется после перезагрузки страницы по умолчанию - PullRequest
Новая
       7

Код события не выполняется после перезагрузки страницы по умолчанию

0 голосов
/ 11 января 2019

При событии формы onSubmit я хотел бы отправить некоторые данные на сервер методом PUT или POST и затем обновить страницу, но страница перезагружается без выполнения оставшейся части кода события. Добавление строки event.preventDefault() устраняет проблему, но блокирует перезагрузку. Чего мне не хватает?

Код события: 

handleFormSubmit = (event, requestType, articleID) => {
        const title = event.target.elements.title.value;
        const content = event.target.elements.content.value;
        switch ( requestType ) {
            case 'post':
                return axios.post('http://127.0.0.1:8000/api/', {
                    title: title,
                    content: content
                })
                .then(res => console.log(res))
                .catch(error => console.err(error));
            case 'put':
                return axios.put(`http://127.0.0.1:8000  /api/${articleID}/`, {
                    title: title,
                    content: content
                })
                .then(res => console.log(res))
                .catch(error => console.err(error));
        }
    }

Код формы: 

 <Form onSubmit={(event) => this.handleFormSubmit(
                event,
                this.props.requestType,
                this.props.articleID )}>
            <FormItem label="Title" >
                <Input name="title" placeholder="Put a title here" />
            </FormItem>
            <FormItem label="Content" >
                <Input name="content" placeholder="Enter some content ..." />
            </FormItem>
            <FormItem>
                <Button type="primary" htmlType="submit">{this.props.btnText}</Button>
            </FormItem>
            </Form>

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Вы можете использовать event.preventDefault(). Но вы должны использовать react-router library history.push() для ручной загрузки другого компонента после завершения вашего запроса. 

  case 'post':
             return axios.post('http://127.0.0.1:8000/api/', {
                    title: title,
                    content: content
             })
             .then(res => {
                  console.log(res);
                  // using "history.push()" to load another component
                  this.props.history.push('/somePage')
                  })
             .catch(error => console.err(error));

Вышеуказанный Form компонент должен быть маршрутизирован с использованием реагирующего маршрутизатора, или Form компонент должен быть Component маршрутизирован с использованием реагирующего маршрутизатора.

0 голосов
/ 11 января 2019

Вам необходимо программно перезагрузить страницу после того, как форма была успешно отправлена, или показать сообщение об ошибке, если нет ответа или какая-либо ошибка сервера: 

class App extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    return axios
      .post("https://reqres.in/api/login", {
        email: "title",
        password: "content"
      })
      .then(res => {
        alert(res.data.token);
        location.reload();
      })
      .catch(error => console.log(error));
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.handleSubmit}>
          <input type="text" placeholder="Email" />
          <input type="password" placeholder="Password" />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

Вот демоверсия: https://codesandbox.io/s/j7j00nq705

...