小编hen*_*doe的帖子

我正在尝试使用 formik 创建登录表单。我对如何触发 handleSubmit 函数来调用登录 api 供用户登录感到困惑。我一直在 onSubmit 内调用handleSubmit，但它无法识别 ValidatedLoginForm.js 文件中的codesandbox 中第10 行和第11 行的onSubmit 方法内的值和handleSubmit。我到底在哪里调用handleSubmit并让用户登录我的网站？

我的代码沙盒

我的代码看起来像这样：

import React, { useState } from "react";
import { Formik } from "formik";
import TextField from "@material-ui/core/TextField";
import * as Yup from "yup";

const ValidatedLoginForm = props => (
  <Formik
    initialValues={{ email: "", password: "" }}
    onSubmit={values => {
      const handleSubmit = async event => {
        event.preventDefault();

        var body = {
          password: password,
          email: email
        };
        console.log(body);
        const options = {
          method: "POST", …

我已经为注册页面设置了 formik 表单，但当我单击提交按钮时它没有提交表单。另外，由于我使用的是 formik 表单，因此有一些来自 formik 的道具和来自我的父组件的一些道具。我们可以在一个组件中使用来自两个不同组件的两个 props 吗？

注册组件

import React, { useState } from "react";
import { Formik } from "formik";
import TextField from "@material-ui/core/TextField";
import * as Yup from "yup";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";

function Copyright() {
    return ( …

我的导航栏隐藏了导航栏下方的内容。此外，它粘在左侧而不是中间部分。我希望有人能告诉我正确的方法来制作导航栏的正确方法来制作一个粘性导航栏，即使我们在滚动时也能保持在它的位置。

代码沙盒https://codesandbox.io/s/clever-voice-24udr

导航栏.js

import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { Button } from "react-bootstrap";

const NavbarPage = () => {
  const guestLinks = (
    <ul>
      <li>
        <Link to="/">
          <Button className="btn btn-primary createNew">Create New</Button>
        </Link>
      </li>
      <li>
        <Link to="/about">
          <Button className="btn btn-danger signOut">Sign out</Button>
        </Link>
      </li>
    </ul>
  );
  return (
    <nav className="navbar bg-white">
      <h3 className="titleName">
        <Link to="/">
          <i className="fas fa-pen" /> demo
        </Link>
      </h3>
      {guestLinks}
    </nav>
  );
};

export default NavbarPage;

.navbar …