Chrome Autofill携带不同形式

Question

首先，我要猜测我要以错误的方式渲染表单。我想我只想了解我在哪里出错的地方？

我有两个选项卡，它会传递给定义一个活动的道具。

然后，此支架呈现登录或注册表格。

我有一个代码框，您需要输入电子邮件和密码，然后单击Chrome中的提交。这将提示您保存密码。

如果您执行上述操作，则输入应自动填充，并且在从登录中导航以注册电子邮件和密码自动填充时，现在将携带以注册和填充相同的细节，甚至是纯文本的密码。

我该如何确保不会发生这种情况？任何帮助将不胜感激。

下面是我的组件，您可以在Codesandbox上查看整个应用

import React, { useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "lodash";
import InputControl from "./InputControl";
import InputButton from "./InputButton";
import FormControl from "./FormControl";
const LoginCard = props => {
  const [hideContent, setHideContent] = useState(false);
  const [emailSignUpRef, setEmailSignUpRef] = useState("");
  const [firstNameSignUpRef, setFirstNameEmailSignUpRef] = useState("");
  const [surNameSignUpRef, setSurNameEmailSignUpRef] = useState("");
  let registerEmailInput = "";
  let firstNameInput = "";
  let surNameInput = "";
  let checkBoxSignUp = "";
  let signUpBtn = "";
  const scrollToEl = _.debounce(
    el =>
      window.scrollTo({
        top: el,
        behavior: "smooth"
      }),
    1000
  );
  const handleOnFocus = event => {
    scrollToEl(event.target);
    setEmailSignUpRef(registerEmailInput.value);
    setFirstNameEmailSignUpRef(firstNameInput.value);
    setHideContent(true);
  };
  const handleOnInput = () => {
    setEmailSignUpRef(registerEmailInput.value);
    setFirstNameEmailSignUpRef(firstNameInput.value);
  };
  const handleOnBlur = event => {
    const rl = event.relatedTarget;
    if (
      !(firstNameInput === rl) &&
      !(registerEmailInput === rl) &&
      !(checkBoxSignUp === rl) &&
      !(signUpBtn === rl)
    ) {
      setHideContent(
        !_.isEmpty(emailSignUpRef.trim()) ||
          !_.isEmpty(firstNameSignUpRef.trim())
      );
    }
  };
  const loginForm = (
    <FormControl>
      <InputControl
        autoComplete="off"
        type="text"
        name="emailAddress"
        placeholder="Email address"
        label="Email Address"
      />
      <InputControl
        autoComplete="off"
        type="password"
        name="password"
        placeholder="Password"
        label="Password"
      />
      <InputControl type="checkbox" name="email" label="Keep me logged in" />
      <InputButton buttonText="Login" type="submit" />
    </FormControl>
  );
  const registerForm = (
    <FormControl>
      <InputControl
        refProp={input => {
          registerEmailInput = input;
        }}
        onInput={handleOnInput}
        onFocus={handleOnFocus}
        onBlur={handleOnBlur}
        value={emailSignUpRef}
        autoComplete="off"
        type="text"
        name="emailAddressRegister"
        placeholder="Email address"
        label="Email Address"
      />
      <InputControl
        className={
          !hideContent ? "InputControl--hidden" : "InputControl--visible"
        }
        autoComplete="off"
        refProp={input => {
          firstNameInput = input;
        }}
        onInput={handleOnInput}
        onBlur={handleOnBlur}
        type="text"
        name="firstName"
        placeholder="First Name"
        label="First Name"
      />
      <InputControl
        className={
          !hideContent ? "InputControl--hidden" : "InputControl--visible"
        }
        autoComplete="off"
        refProp={input => {
          surNameInput = input;
        }}
        onInput={handleOnInput}
        onBlur={handleOnBlur}
        type="text"
        name="surName"
        placeholder="Surname"
        label="Surname"
      />
      <InputControl
        refProp={input => {
          checkBoxSignUp = input;
        }}
        type="checkbox"
        name="checkboxRegister"
        label={["I have read and agreed to the terms and conditions"]}
      />
      <InputButton
        refProp={input => {
          signUpBtn = input;
        }}
        buttonText="Sign Up"
        type="submit"
      />
    </FormControl>
  );
  return (
    <div className="LoginCard">
      <h2
        className={
          "LoginCard-title" + (hideContent ? " LoginCard-titleHidden" : "")
        }
      >
        {props.active === "login" ? "Login" : "Sign Up"}
      </h2>
      {props.active === "login" ? loginForm : registerForm}
    </div>
  );
};
export default withRouter(LoginCard);

Answer 1

只是修复了此问题。这是由于不在FormControl组件上传递key属性！

<FormControl key={"loginForm"}