React-Hook-Form 在 PC 上工作，但在移动输入上切换字段时变为空白

Question

我使用 React-Hook-Form 和 Yup 进行验证以制作 Amazon Create Account Clone。在我的 PC 上一切正常，但是当我尝试在移动浏览器（Chrome 和 Safari）上使用表单时，当我点击输入新的输入字段时，输入字段文本似乎消失了。当我返回到“消失”字段时，我之前输入的文本会重新出现，但一旦我单击一个新字段，它就会再次消失。我需要移动版才能像 PC 版一样工作。该应用程序是使用 create-react-app 创建的，并使用 Firestore 进行部署。 https://login-clone.web.app/

Signup.js

import React from 'react';
import '../App.css';
import hr from '../assets/hr.png';
import iFont from '../assets/iFont.png';
import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const SignupSchema = yup.object().shape({
    userName: yup
        .string()
        .required("Enter your name"),
    email: yup
        .string()
        .email("Enter a valid email address")
        .max(1064)
        .required("Enter your email"),
    password: yup
        .string()
        .min(6, "Passwords must be at least 6 characters")
        .required("Enter your password"),
    rePassword: yup
        .string()
        .required('Type your password again')
        .oneOf([yup.ref('password')], 'Passwords must match')
});


const Signup = () => {
    const { register, handleSubmit, errors } = useForm({
        resolver: yupResolver(SignupSchema)
    });
    const onSubmit = data => {
        console.log(JSON.stringify(data));
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div className='form-container'>

                <h1> Create account </h1>

                <label> Your name </label>
                <input
                    className={errors.userName && 'alertInput'}
                    name="userName"
                    type="text"
                    autoComplete="on"
                    ref={register}
                />
                {errors.userName && <div className="alertText"> {errors.userName.message} </div>}

                <label> Email </label>
                <input
                    className={errors.email && 'alertInput'}
                    name="email"
                    type="text"
                    autoComplete="on"
                    ref={register} />
                {errors.email && <div className="alertText"> {errors.email.message} </div>}

                <label> Password </label>
                <input
                    className={errors.password ? 'alertInput' : 'passwordColor'}
                    name="password"
                    type="text"
                    autoComplete="off"
                    placeholder="At least 6 characters"
                    ref={register} />
                {errors.password && <div className="alertText"> {errors.password.message} </div>}

                <p className={errors.password ? 'displayNone' : 'passwordColor'}>
                    <img src={iFont} className="iFont" alt="info icon" />
                 Passwords must be at least 6 characters. </p>


                <label> Re-enter password </label>
                <input
                    className={errors.rePassword && 'alertInput'}
                    name="rePassword"
                    autoComplete="off"
                    ref={register} />
                {errors.rePassword && <div className="alertText"> {errors.rePassword.message} </div>}


                <button type='submit'> Create your Amazon account </button>

                <p> By creating an account, you agree to Amazon's </p>

                <p> <span className="sm-font">Conditions</span> of Use and <span className='sm-font'> Privacy Notice. </span></p>

                <img src={hr} className="hr1" alt="horizontal line" />

                <p> Already have an account?  <span>Sign-in ▸</span> </p>
            </div>
        </form>
    )
}
export default Signup;

Answer 1

找到问题了。这是由您的 css 行高引起的。不要在输入 css 中同时使用行高和高度。（我也不知道为什么，我不擅长css）

input {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 5px;
  font-size: 13.33px;
  height: 23px;
  width: 292px;
  padding: 3px 7px;
  /*line-height: 19;*/
  border-radius: 3px;
  border: 1px solid #a6a6a6;
  border-top-color: #949494;
  cursor: text;
  text-rendering: optimizeLegibility !important;
}

Working sandbox

React-Hook-Form 在 PC 上工作，但在移动输入上切换字段时变为空白

React-Hook-Form working on PC, but on mobile inputs go blank when switching fields

reactjs

react-forms