Как сделать ссылку на следующий URL-адрес страницы в handleSubmit formik? - PullRequest
Новая
       10

Как сделать ссылку на следующий URL-адрес страницы в handleSubmit formik?

0 голосов
/ 27 июня 2019

У меня есть два функциональных компонента в моем процессе.Сначала мне нужно, чтобы информация о первом компоненте была заполнена и проверена Formik и Yup, а затем пользователь может обработать следующий шаг во втором компоненте, нажав Далее.На данный момент я могу проверить все, и код может без проблем добраться до handleSubmit ().Но проблема в том, что я не могу связать с другим компонентом, используя <Link>.Я попытался: 

 // Using this first one, no validation is performed and it will link to another component directly
 <Link to="/Next">
    <button type="submit">Next</Button>
 </Link>


 // I have put these inside handleSubmit() but it is undefined.
 this.context.router.push('/Next');
 Router.push('/Next')
 this.props.history.push('/Next')

В основном я получил неопределенный вывод на консоль, используя этот код.Кажется, что я не мог получить доступ к реквизиту из функциональных компонентов, как в классе реакции.Вот мой первый компонент: 

import React from 'react';
import { withFormik, Field } from 'formik';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect
} from "react-router-dom";


const MyForm = props => { const {handleSubmit} = props;
  return (
    <form onSubmit={handleSubmit}>
          <Field type="email" name="email" placeholder="Email" />
          <button type="submit">Next</button>
//          <Link to="/Next">
//              <button type="submit">Next</Button>
//          </Link>
    </Field>
  );
};

const MyEnhancedForm = withFormik({
  mapPropsToValues: () => ({ email: '' }),

  handleSubmit: (values, formikBag) => {
      // Link to next page code
  },
})(MyForm);

1 Ответ

0 голосов
/ 27 июня 2019

Да, мы не можем использовать this.props в функциональных компонентах, но мы можем написать ту же логику маршрутизации в родительском компоненте и передать ее как опору в функциональном компоненте.Тогда мы можем вызвать ту же функцию в handleSubmit().

...