Javascript 使用submitFormHandler ReactJS时未提交登录表单

我有一个单页应用程序，我试图创建一个单独的登录页，最终将经过身份验证的用户重定向到主应用程序，但我的submitFormHandler没有被调用。认证点不是为了访问主站点（App.jsx），而是为了查看导航菜单

当我在App.jsx中使用LoginForm和Login组件时，一切都正常，但它仍然是SPA的形式，这不是我想要的。我移动了一些东西，发现在DOM中呈现登录和默认站点（应用程序）时使用了我想要的，但是现在我遇到了这个问题

为了让事情弄清楚，我是React的完全新手，从未尝试过直接在DOM中路由

我的代码：

index.js：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Login from "./components/Login";
import LoginForm from "./components/LoginForm";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import axios from "axios";
import "./index.css"

let apiUrl;
if (process.env.NODE_ENV === "production") {
  apiUrl = "https://xxxxxxxx.herokuapp.com/api/v1";
} else {
  apiUrl = "http://localhost:3000/api/v1";
}
axios.defaults.baseURL = apiUrl;

ReactDOM.render((
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={App} />
      <Route 
        exact path="/login"
        render={(props) =>
          <div>
            <Login />
          </div>
        }
      />
    </Switch>
  </BrowserRouter>
), document.getElementById("root"));

reportWebVitals();

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
从“/components/Login”导入登录名；
从“/components/LoginForm”导入LoginForm；
从“/reportWebVitals”导入reportWebVitals；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“axios”导入axios；
导入“/index.css”
让我们一起分享；
if（process.env.NODE_env==“生产”）{
apiUrl=”https://xxxxxxxx.herokuapp.com/api/v1";
}否则{
apiUrl=”http://localhost:3000/api/v1";
}
axios.defaults.baseURL=apiUrl；
ReactDOM.render((
}
/>
)，document.getElementById（“根”）；
reportWebVitals（）；

Login.jsx：

import React, { Component } from 'react';
import { authenticate } from '../modules/auth';
import LoginForm from "./LoginForm";

class Login extends Component {
  state = {
    renderLoginForm: false,
    authenticated: false,
    message: ""
  }

  onChangeHandler = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }

  onLogin = async (e) => {
    e.preventDefault();
    const response = await authenticate(
      e.target.email.value,
      e.target.password.value
    );
    if (response.authenticated) {
      this.setState({ authenticated: true });
    } else {
      this.setState({ message: response.message, renderLoginForm: false });
    }
  };

  render() {
    const { renderLoginForm, authenticated, message } = this.state;
    let renderLogin;
    // eslint-disable-next-line default-case
    switch (true) {
      case renderLogin && !authenticated:
        renderLogin = <LoginForm submitFormHandler={this.onLogin} />;
        break;
      case !renderLoginForm && !authenticated:
        renderLogin = (
          <>
            <button
              id="login-button"
              onClick={() => this.setState({ renderLoginForm: true })}
            >
              Login
            </button>
            <p id="message">{message}</p>
          </>
        );
        break;
      case authenticated:
        renderLogin = (
          <p id="welcome-message">
            You are logged in as{" "}
            {JSON.parse(sessionStorage.getItem("credentials")).uid}.
          </p>
        );
        break;
    }

    return (
      <>
        {renderLogin}
      </>
    )
  }
}

export default Login;

import React，{Component}来自'React'；
从“../modules/auth”导入{authenticate}；
从“/LoginForm”导入LoginForm；
类登录扩展组件{
状态={
renderLoginForm:false，
认证：假，
信息：“
}
onChangeHandler=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
}
onLogin=async（e）=>{
e、 预防默认值（）；
const response=等待验证(
e、 target.email.value，
e、 target.password.value
);
if（response.authenticated）{
this.setState（{authenticated:true}）；
}否则{
this.setState（{message:response.message，renderLoginForm:false}）；
}
};
render（）{
const{renderLoginForm，authenticated，message}=this.state；
让renderLogin；
//eslint禁用下一行默认情况
开关（真）{
案例renderLogin&！已验证：
renderLogin=；
打破
案例！renderLoginForm&！已验证：
renderLogin=(
this.setState（{renderLoginForm:true}）
>
登录
{message}
);
打破
已验证的案例：
renderLogin=(

您以{“}身份登录
{JSON.parse（sessionStorage.getItem（“凭证”））.uid}。

);
打破
}
返回(
{renderLogin}
)
}
}
导出默认登录；

LoginForm.jsx：

import React, { useState } from "react";
import { Link, BrowserRouter } from "react-router-dom";
import { Button, Form, Container, Message, MenuItem } from "semantic-ui-react";

const LoginForm = ({ submitFormHandler }) => {
  const [message, setMessage] = useState();
  return (
    <>
      <Container>
        <Form onSubmit={submitFormHandler} id="login-form">
          <Form.Input
            icon="user"
            iconPosition="left"
            placeholder="email"
            label="Email:"
            type="email"
            name="email"
            id="login-email"
            required
          />

          <Form.Input
            icon="lock"
            iconPosition="left"
            placeholder="password"
            label="Password:"
            type="password"
            name="password"
            id="login-password"
            required
          />
          <Button id="login-submit" type="submit" content="Submit" primary />
        </Form>
      </Container>

      <Container>
        <div>
          <BrowserRouter>
            <Link to="/register" id="register">
              Don't have an account yet? Sign up now!
            </Link>
          </BrowserRouter>
        </div>

        {message && (
          <Message id="onlogin-message" color="red">
            {message}
          </Message>
        )}
      </Container>
    </>
  );
};

export default LoginForm;

import React，{useState}来自“React”；
从“react router dom”导入{Link，BrowserRouter}；
从“语义ui反应”导入{按钮、表单、容器、消息、菜单项}；
const LoginForm=（{submitFormHandler}）=>{
const[message，setMessage]=useState（）；
返回(
还没有帐户？现在就注册吧！
{消息&&(
{message}
)}
);
};
导出默认登录信息；

App.jsx：

/* eslint-disable default-case */
import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

// Component Imports
import Header from "./components/Header";
import Footer from "./components/Footer";
import SideBar from "./components/SideBar";
import LoginForm from "./components/LoginForm";
import Dashboard from "./components/Dashboard";
import Preferences from "./components/Preferences";
import DisplayWizard from "./components/DisplayWizard";
// import InputFields from "./components/InputFields";

// Module Imports
import { authenticate } from "./modules/auth";

// Icon Imports
import AppsIcon from "@material-ui/icons/Apps";
import HomeIcon from "@material-ui/icons/Home";
import StoreIcon from "@material-ui/icons/Store";
import CreateIcon from "@material-ui/icons/Create";
import DeleteIcon from "@material-ui/icons/Delete";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import HistoryIcon from "@material-ui/icons/History";
import SettingsIcon from "@material-ui/icons/Settings";
import DriveEtaIcon from "@material-ui/icons/DriveEta";
import MenuBookIcon from "@material-ui/icons/MenuBook";
import BusinessIcon from "@material-ui/icons/Business";
import LocalParkingIcon from "@material-ui/icons/LocalParking";
import FormatListBulletedIcon from "@material-ui/icons/FormatListBulleted";
import SupervisorAccountIcon from "@material-ui/icons/SupervisorAccount";

function onClick(e, item) {
  window.alert(JSON.stringify(item, null, 2));
}

// Menu List Items
const items = [
  { name: "home", label: "Home", Icon: HomeIcon },
  "divider",
  {
    name: "manage",
    label: "Manage",
    Icon: AppsIcon,
    items: [
      { name: "my cars", label: "My Cars", Icon: DriveEtaIcon, onClick },
      { name: "inventory", label: "Inventory", Icon: StoreIcon, onClick },
      { name: "past orders", label: "Past Orders", Icon: HistoryIcon, onClick },
      {
        name: "parking spots",
        label: "Parking Spots",
        Icon: LocalParkingIcon,
        onClick,
      },
    ],
  },
  "divider",
  { name: "reports", label: "Reports", Icon: MenuBookIcon },
  "divider",
  {
    name: "stages",
    label: "Stages",
    Icon: FormatListBulletedIcon,
    items: [
      { name: "workshop", label: "Workshop", onClick },
      { name: "panelshop", label: "Panelshop", onClick },
    ],
  },
  "divider",
  {
    name: "admin",
    label: "Admin",
    Icon: SupervisorAccountIcon,
    items: [
      {
        name: "create new login",
        label: "Create new login",
        Icon: VpnKeyIcon,
        onClick,
      },
      {
        name: "set company/dealership",
        label: "Set Company/Dealership",
        Icon: BusinessIcon,
        onClick,
      },
      { name: "edit flow", label: "Edit Flow", Icon: CreateIcon, onClick },
      {
        name: "delete previous order",
        label: "Delete Previous Order",
        Icon: DeleteIcon,
        onClick,
      },
      {
        name: "set default options",
        label: "Set Default Options",
        Icon: CreateIcon,
        onClick,
      },
    ],
  },
  "divider",
  {
    name: "settings",
    label: "Settings",
    Icon: SettingsIcon,
    items: [
      { name: "profile", label: "Profile", onClick },
      { name: "preferences", label: "Preferences", onClick },
    ],
  },
];



class App extends Component {
  state = {
    regnum: "",
    ordernum: "",
    make: "nissan",
    model: "",
    year: "",
    color: "",
    mileage: "",
    // renderLoginForm: false,
    // authenticated: false,
    // message: "",
  };
    
  render() {
    return (
      <>
        <div className="App" id="">
          <div className="wrapper">
            {/* {renderLogin} */}
          </div>
          <Header />
          <DisplayWizard onChangeHandler={this.onChangeHandler} />
          <SideBar items={items} />
          <Footer />
        </div>
      </>
    );
  }
}

export default App;

/*eslint禁用默认情况*/
从“React”导入React，{Component}；
从“react router dom”导入{BrowserRouter，Route，Switch}；
//部件进口
从“/components/Header”导入标题；
从“/components/Footer”导入页脚；
从“/components/SideBar”导入侧栏；
从“/components/LoginForm”导入LoginForm；
从“/components/Dashboard”导入仪表板；
从“/components/Preferences”导入首选项；
从“/components/DisplayWizard”导入DisplayWizard；
//从“/components/InputFields”导入输入字段；
//模块导入
从“/modules/auth”导入{authenticate}；
//图标导入
从“@material ui/icons/Apps”导入AppsIcon；
从“@material ui/icons/Home”导入HomeIcon；
从“@material ui/icons/Store”导入StoreIcon；
从“@material ui/icons/Create”导入CreateIcon；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/icons/VpnKey”导入VpnKeyIcon；
从“@material ui/icons/History”导入HistoryIcon；
从“@material ui/图标/设置”导入设置图标；
从“@material ui/icons/DriveEta”导入DriveEtaIcon；
从“@material ui/icons/MenuBook”导入菜单ookicon；
从“@material ui/icons/Business”导入BusinessIcon；
从“@material ui/icons/LocalParking”导入LocalParkingIcon；
从“@material ui/icons/formatListBulletted”导入FormatListBullettedIcon；
从“@material ui/icons/SupervisorAccount”导入SupervisorAccountCon；
函数onClick（e，项）{
alert（JSON.stringify（item，null，2））；
}
//菜单列表项
常数项=[
{名称：“主页”，标签：“主页”，图标：HomeIcon}，
“分隔器”，
{
名称：“管理”，
标签：“管理”，
图标：AppsIcon，
项目：[
{名称：“我的车”，标签：“我的车”，图标：DriveTaicon，onClick}，
{名称：“库存”，标签：“库存”，图标：StoreIcon，onClick}，
{名称：“过去的订单”，标签：“过去的订单”，图标：HistoryIcon，onClick}，
{
名称：“停车位”，
标签：“停车位”，
图标：LocalParkingIcon，
onClick，
},
],
},
“分隔器”，
{名称：“报告”，标签：“报告”，图标：MenuBookIcon}，
“分隔器”，
{
名称：“阶段”，
标签：“阶段”，
图标：FormatListBulletedIcon，
项目：[
{名称：“车间”，labe
  case renderLogin && !authenticated:

  case renderLoginForm && !authenticated: