Question

我的目的是创建一个包含两个步骤的注册表。第一步，用户输入其凭据，然后我想异步验证后端是否已经存在用户名。如果一切正常，则他/她可以单击“下一步”继续下一步，但此时所有数据尚未提交到服务器。第二步，用户需要填写一些信息，然后单击提交以完成注册并将数据发送到服务器。为此，我考虑创建两个组件。第一个组件负责用户凭证，另一个组件负责用户详细信息。创建这两个组件之后，我将创建另一个类，该类将导入这两个组件。创建第三类是为了确保如果用户从第二步返回到第一步单击时所有属性都是安全的（我不确定这是否是正确的方法，但这是我可以根据我目前的编程知识想到的语言。如果有更好的方法，请提出建议。）

为了有效的客户端，我选择使用withFormik和Yup。但是，问题是，我无法使其正常工作并且无法使客户端有效。通过在render方法中返回FormikApp，总是会引发很多错误。我尝试过返回App，但它也无法正常工作。

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}
        )
    }
}

如何在reactjs类中的yup中使用withFormik？

0 个答案: