Автозаполнение Chrome для разных форм - PullRequest
Новая
       12

Автозаполнение Chrome для разных форм

0 голосов
/ 16 марта 2019

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

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

Этот реквизит затем отображает либо логинили зарегистрируйтесь.

У меня есть 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) &&
      !(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);

1 Ответ

0 голосов
/ 16 марта 2019

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

<FormControl key={"loginForm"}
...