问一个页面中的多个表单- reactjs

EN

import React, { useState } from "react";

import { useForm } from "../../shared/hooks/form-hook";
import Card from "../../shared/components/UIElements/Card";
import Input from "../../shared/components/FormElements/Input";
import Button from "../../shared/components/FormElements/Button";
import {
  VALIDATOR_MINLENGTH,
  VALIDATOR_EMAIL
} from "../../shared/util/validators";
import "./Auth.css";

const Auth = props => {
  const [showLogin, setShowLogin] = useState(true);

  const [formStateLogin, inputHandlerLogin] = useForm(
    {
      email: {
        value: "",
        isValid: false
      },
      password: {
        value: "",
        isValid: false
      }
    },
    false
  );
  const [formStateSignup, inputHandlerSignup] = useForm(
    {
      name: {
        value: "",
        isValid: false
      },
      email: {
        value: "",
        isValid: false
      },
      password: {
        value: "",
        isValid: false
      }
    },
    false
  );

  const loginSubmitHandler = event => {
    event.preventDefault();
    console.log("login handler");
  };

  const signupSubmitHandler = event => {
    event.preventDefault();
    console.log(formStateSignup.inputs);
  };

  const switchButtonHandler = () => {
    setShowLogin(!showLogin);
  };

  return (
    <Card className="authentication">
      {showLogin ? (
        <form onSubmit={loginSubmitHandler} className="place-form">
          <h2>Enter your login details</h2>
          <Input
            id="email"
            element="input"
            type="email"
            placeholder="Email address"
            label="Email"
            validators={[VALIDATOR_EMAIL(), VALIDATOR_MINLENGTH(5)]}
            onInput={inputHandlerLogin}
            errorText="Please enter valid email address"
          />
          <Input
            id="password"
            element="input"
            type="password"
            placeholder="Password"
            label="Password"
            validators={[VALIDATOR_MINLENGTH(5)]}
            onInput={inputHandlerLogin}
            errorText="Please enter valid password (at least 5 chars)"
          />
          <Button type="submit" disabled={!formStateLogin.isValid}>
            LOGIN
          </Button>
        </form>
      ) : (
        <form onSubmit={signupSubmitHandler} className="place-form">
          <h2>Enter your signup details</h2>
          <Input
            id="name_s"
            element="input"
            type="text"
            placeholder="Enter your name"
            label="Name"
            validators={[VALIDATOR_MINLENGTH(2)]}
            onInput={inputHandlerSignup}
            errorText="Please enter valid name at least 2 chars"
          />
          <Input
            id="email_s"
            element="input"
            type="email"
            placeholder="Email address"
            label="Email"
            validators={[VALIDATOR_EMAIL(), VALIDATOR_MINLENGTH(5)]}
            onInput={inputHandlerSignup}
            errorText="Please enter valid email address"
          />
          <Input
            id="password_s"
            element="input"
            type="password"
            placeholder="Password"
            label="Password"
            validators={[VALIDATOR_MINLENGTH(5)]}
            onInput={inputHandlerSignup}
            errorText="Please enter valid password (at least 5 chars)"
          />
          <Button type="submit" disabled={!formStateSignup.isValid}>
            LOGIN
          </Button>
        </form>
      )}
      <Button inverse onClick={switchButtonHandler}>
        {showLogin ? "SWITCH TO SIGNUP" : "SWITCH TO LOGIN"}
      </Button>
    </Card>
  );
};

export default Auth;