一页中的多个表单-reactjs答案

【问题标题】：multiple forms in one page - reactjs一页中的多个表单-reactjs
【发布时间】：2020-01-25 14:55:17
【问题描述】：

我正在构建页面，用户可以通过单击切换按钮在登录和注册模式之间切换。登录表单有 2 个输入字段，注册表单有 3 个输入字段。我的想法是构建 2 个相互独立的表单并使用 2 个单独的自定义钩子实例。

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;

两种形式似乎都很好，但问题是当我以一种形式输入文本并决定切换到另一种形式时，已离开形式的值不会丢失，而是会转换为新形式：

这是 ReactJS 的限制，是 HTML 吗？ :) 还是只是我的错误代码？

【问题讨论】：

使用不同的名称state 来表示它可以工作的形式
我不是已经通过使用单独的 useForm 挂钩实例了吗？？？

标签： javascript html reactjs

【解决方案1】：

在一个组件中包含两个表单不是一个好的约定，它会造成混乱......我宁愿制作两个独立的 LoginForm 和 SignUpForm 组件，并通过基于 state 的三元运算符在它们之间切换，无论您采用哪种方式像。您的表单和它们的状态将被分开，代码更具可读性

【讨论】：

一页上的两个表单非常常见。在此处获取此页面。每个线程都有一个表格。顶部有一个搜索表格。下面有一个答案表格。组件只是嵌套的状态机，无论如何都会被捆绑到更大的组件中。

【解决方案2】：

如果您在第一页选择单选按钮然后使用单选按钮呈现第二页，复选框和单选按钮也会发生相同的情况，因为 dom 操作成本高昂，因此会自动选择，

在您的情况下，react 只是添加新的第三个字段并将其删除，您需要将字段的 value 属性设置为相应的状态。

【讨论】：

我已经在我的示例中尝试过，但它没有正确选择它:)

【解决方案3】：

其实可以。使用嵌套路由在组件之间切换

import { Switch, Route } from 'react-router-dom';

<Switch>
   <Route path='/register' >
      // component 1
      <Register />
   </Route>
   <Route path='/login' >
      // component 2
      <Login />
   </Route>
</Switch>

【讨论】：