React 输入中的 Onchange 导致输入在每个字母上重新呈现

Question

所以我在两个函数中创建了输入，并在Onchange 上获取了输入到它们中的值。但是每当我输入输入时，我一次只能输入一个字母，然后才会失去焦点，我相信这是因为组件一直在渲染。 我还意识到，每当我删除 Onchange 和 value 道具时，一切都会恢复正常，我可以轻松地输入所有内容。我该如何解决这个问题？

App.js

import style from "./auth.module.css";
import { useEffect, useRef, useState } from "react";
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth, signInWithEmailAndPassword, signInWithGoogle, registerWithEmailAndPassword } from "../../firebase";
import { CSSTransition } from "react-transition-group";


function Auth() {
  const [activeMenu, setActiveMenu] = useState("main");
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, loading, error] = useAuthState(auth);

  const Emailform = () => {
    return (
      <div className={style.formBox}>
        <label className={style.label}>Email:</label>
        <form className={style.input}>
          <input 
            type="email" 
            name="email" 
            required="true"
            value={email} 
            onChange={(e) => setEmail(e.target.value)} />
        </form>
      </div>
    );
  }
  
  const Passform = () => {
    return (
      <div className={style.formBox}>
        <label className={style.label}>Password:</label>
  
        <form className={style.input}>
          <input 
            type="password" 
            name="password" 
            required="true"
            value={password} 
            onChange={(e) => setPassword(e.target.value)} />
        </form>
      </div>
    );
  }

  let domNode = useClickOutside(() => {
    setActiveMenu(false);
  });

  return (
    <div className={style.container}>
      <Login />
      <Signup />
    </div>
  );

  function AuthType(props) {
    return (
      <a
        href={props.link}
        className={style.menuItem}
        onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)}
      >
        {props.children}
      </a>
    );
  }


/* Login */
  function Login() {
    return (
      <CSSTransition in={activeMenu === "main"} unmountOnExit timeout={500}>
        <div ref={domNode}>
          <div className={style.login}>
            <h1 className={style.title}>Clip It</h1>
            {/* Email and Password */}
            <Emailform/>
            <Passform/>

            <div className={style.button}>
              <input 
                type="submit" 
                value="Login"
                onClick={() => signInWithEmailAndPassword(email, password)} />
              <input 
                type="submit" 
                value="Login with Google"
                onClick={signInWithGoogle} />
            </div>
            <div className={style.text}>
              <p className={style.plink}>Forgot Password</p>
              <div>
                Need an account?&nbsp;
                <AuthType goToMenu="Signup">click here</AuthType>
              </div>
            </div>
          </div>
        </div>
      </CSSTransition>
    );
  }


  function Signup() {
    return (
      <CSSTransition in={activeMenu === "Signup"} unmountOnExit timeout={500}>
        <div ref={domNode}>
          <div className={style.signUp}>
            <div className={style.title}> Clip It</div>
            <Form label="First Name" type="text" />
            <Form label="Last Name" type="Text" />
            <Form label="Email" type="email"/>
            <Form label="Date of Birth" type="date" />
            <Form label="Password" type="password"/>
            <Form label="Confirm Password" type="password" />
            <div className={style.button}>
              <input type="submit" value="Sign Up" />
            </div>
            <div className={style.text}>
              have an&nbsp;
              <AuthType goToMenu="main"> account</AuthType>
            </div>
          </div>
        </div>
      </CSSTransition>
    );
  }
}
let useClickOutside = (handler) => {
  let domNode = useRef();

  useEffect(() => {
    let clickListener = (event) => {
      if (domNode.current && !domNode.current.contains(event.target)) {
        handler();
      }
    };

    document.addEventListener("mousedown", clickListener);

    return () => {
      document.removeEventListener("mousedown", clickListener);
    };
  });
  return domNode;
};

function Form(props) {
  return (
    <div className={style.formBox}>
      <label className={style.label}>{props.label}:</label>

      <form className={style.input}>
        <input 
          type={props.input} 
          name={props.input} 
          required="true" />
      </form>
    </div>
  );
}

export default Auth;

Answer 1

可能重复：In React ES6, why does the input field lose focus after typing a character?

一种解决方案是将电子邮件表单移到父组件之外。

const Emailform = ({ onChange }) => {
  return (
    <div>
      <label>Email:</label>
      <form>
        <input
          type="email"
          name="email"
          required="true"
          onChange={onChange}
        />
      </form>
    </div>
  );
};

const App = () => {
  const [email, setEmail] = useState("");
  return (
    <div>
        <Emailform onChange={(e) => setEmail(e.target.value)} />
    </div>
  );
};

Answer 2

不要将您的组件定义放在其他组件中。如果这样做，您会在每次渲染时创建一个新组件。

您需要设法将 Emailform、Passform 移到 Auth 之外。

结帐this sandbox 进行实验

function Auth() {
  // ? the bad place to define components
  const Emailform = () => {
    ...
  }
  // ? the bad place to define components
  const Passform = () => {
    ...
  }
}