Блог

Прежде всего, я собираюсь предположить, что я собираюсь отобразить формы неправильным способом. Я думаю, я просто хочу понять, где я здесь ошибся?

У меня есть две вкладки, которые передают обратно prop, чтобы определить, какая из них активна.

Затем этот реквизит отображает форму входа в систему или регистрации.

У меня есть CodeSandbox, в котором вам нужно будет ввести адрес электронной почты и пароль и нажать отправить в 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) amp;amp;
      !(registerEmailInput === rl) amp;amp;
      !(checkBoxSignUp === rl) amp;amp;
      !(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);
  

Только что исправлена эта проблема. Это произошло из-за того, что не был передан key атрибут для FormControl компонента!

 <FormControl key={"loginForm"}