Как использовать withFormik с yup внутри класса responsejs? - PullRequest
Новая
       15

Как использовать withFormik с yup внутри класса responsejs?

1 голос
/ 06 июня 2019

Моя цель - создать форму регистрации, которая состоит из двух этапов. Для первого шага пользователь вводит свои учетные данные, а затем я хочу выполнить асинхронную проверку, если имя пользователя уже существует в бэкэнде. Если все в порядке, он может нажать «Далее», чтобы перейти к следующему шагу, но на данный момент все данные еще не отправлены на сервер. На втором шаге пользователю необходимо заполнить некоторую информацию и нажать «Отправить», чтобы завершить регистрацию и отправить данные на сервер. Чтобы достичь этого, я считаю создание двух компонентов. Первый компонент отвечает за учетные данные пользователя, а другой компонент отвечает за детализацию пользователя. После того, как эти два компонента будут созданы, я создам еще один класс, который будет импортировать эти два компонента. Третий класс создан, чтобы убедиться, что все свойства безопасны, если пользователь переходит со второго шага к первому шагу (я не уверен, что это правильный путь, но это то, о чем я могу думать, основываясь на моих текущих знаниях в программировании язык. Пожалуйста, предложите мне, если есть лучший способ.).

Для правильной клиентской стороны я выбираю использовать withFormik и Yup. Но проблема в том, что я не мог заставить его работать и проверять мою клиентскую сторону. Это всегда дает мне много ошибок при возврате FormikApp в методе рендеринга. Я попытался вернуть приложение, но оно тоже не работает. 

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from "react-router-dom";
import {
  Row,
  InputGroup,
  Col,
  Navbar,
  Nav,
  NavDropdown,
  Form,
  FormControl,
  Button
} from "react-bootstrap";
import { Form as FormikForm, Field, withFormik } from "formik";
import * as Yup from "yup";
import axios from "axios";




class UserCredential extends React.Component {
    App = ({ values, errors, touched }) => (
        <FormikForm className="register-form  " action="">
          <h3 className="register-title">Register</h3>
          <Form.Group className="register-form-group">
            <Field
              name="username"
              type="text"
              placeholder="USERNAME"
              className="form-control rounded register-form-control" />
            {touched.username && errors.username && <p>{errors.username}</p>}
          </Form.Group>
        </FormikForm>
    );

    FormikApp = withFormik({
        mapPropsToValues({ username }) {
            return {
                username: username || ""
            };
        },
        validationSchema: Yup.object().shape({
            username: Yup.string()
                .min(6)
                .max(32)
                .required()
                .test("username", "error message of username", async value => {
                    return true;
                })
        }),
        handleSubmit(values) {
            console.log(values);
        }
    })(App);


    render() {
        return (
            {this.FormikApp}
        )
    }
}
...