我现在才注意到这一点,但是由于某些原因,我似乎无法在使用React和NextJS构建的页面中键入某些输入字段。这仅在移动设备上发生,在桌面上,表格可以完美运行。
然而,这很奇怪。我可以很好地输入密码,这只会在其他输入类型(例如type="text"
和type="email"
)上发生。
仍然可以使用键盘预测在文本框中键入内容,但不能使用普通键盘。
这是我的表格:
function LoginForm(props) { return ( <form onSubmit={props.submitLogin} className={"flex flex-col self-center justify-between w-full"}> <div className={"text-xl text-center mb-4"}>Sign In</div> <div className={"text-gray-600 text-xs pl-2"}>Username:</div> <input value={props.formData.username} name="username" type="text" onChange={props.updateField} className={"form__username my-1 p-2 rounded border-gray-300 border border-solid"} /> <div className={"text-gray-600 text-xs pl-2"}>Password:</div> <input value={props.formData.password} name="password" type="password" onChange={props.updateField} className={"form__password my-1 p-2 rounded border-gray-300 border border-solid"} /> <button className={"bg-blue-500 hover:bg-blue-400 focus:bg-blue-600 focus:shadow-outline p-2 mt-4 rounded border-blue-500 uppercase font-semibold text-gray-100 border border-solid"} >Login</button> <div className={"p-2 text-center"} dangerouslySetInnerHTML={createMarkup(props.formMessage)}> </div> </form> ) }
包含组件:
export function LoginModal(p) { const [showLogin, toggleLogin] = useState(p.showLogin) useEffect(() => { toggleLogin(p.showLogin); }, [p]); const sendSignupForm = e => { e.preventDefault(); if ( Object.values(form).some(empty) ) { props.setMessage("Please fill all the fields.") } else { props.setSignupData(form) } }; const [form, setValues] = useState({ username: '', password: '', checked: false, email: '' }); const [message, setMessage] = useState('') const updateField = e => { setValues({ ...form, [e.target.name]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }); }; const spring = useSpring({ from: { opacity: 0 }, to: { opacity: !p.state ? 1 : 0 } }); const transitions = useTransition(!p.state, null, { from: { transform: `scale(1.5)`, opacity: 0 }, enter: { transform: `scale(1)`, opacity: 1 }, leave: { transform: `scale(1.5)`, opacity: 0 }, unique: true }); const submitLogin = async(e) => { e.preventDefault(); await login(form).then(data => { if(data.message) { setMessage(data.message) } else{ p.setData(data.user) } }) } const submitSignup = async(e) => { e.preventDefault(); if(form.checked){ await register(form).then(data => { console.log(data) if(data.message) { setMessage(data.message) console.log(message) } else{ p.setData(data.user) } }) } else { setMessage("Please accept our privacy policy.") } } return ( <Fragment> <animated.div style={spring} /> {transitions.map(({ item, key, props }) => item ? ( <div key={key} className={"z-10 flex absolute w-screen h-screen top-0 left-0"}> <animated.div className={`popup md:max-w-4xl md:h-2/4 xs:w-full justify-center flex lg:flex-row xs:flex-col fixed rounded left-0 right-0 mx-auto self-center -mt-3 sm:mt-0`} style={ props } > <button className={"absolute right-0 p-4 xs:top-0"} onClick={() => p.onClick(false)}><Close/></button> <div className={"hidden bg-gray-900 rounded rounded-r-none w-2/4 lg:flex items-center justify-center "}> <div className="text-gray-100 header__logo--white self-centertext-6xl xs:mx-auto sm:mx-0"> <Logo/> </div> </div> <div className={"popup__forms flex flex-col xs:mx-auto xs:w-full justify-center popup__form rounded rounded-l-none lg:w-2/4 p-5"}> { showLogin ? ( <LoginForm submitLogin={submitLogin} updateField={updateField} formMessage={message} formData={form}/> ) : ( <SignUpForm submitSignup={submitSignup} updateField={updateField} formMessage={message} formData={form}/> ) } { showLogin ? ( <div className="my-4 text-center">Not a member? <a onClick={() => toggleLogin(false)} className={"cursor-pointer text-blue-500 hover:text-blue-400 underline"}>Sign Up</a></div> ) : ( <div className="my-4 text-center">Already a member? <a onClick={() => toggleLogin(true)} className={"cursor-pointer text-blue-500 hover:text-blue-400 underline"}>Login</a></div> ) } </div> </animated.div> <animated.div className={`popup-background fixed top-0 left-0 w-full items-center justify-center h-screen`} onClick={() => p.toggle(!p.state)} style={props}> </animated.div> </div> ) : null ) } </Fragment> ) }
所有这些都通过相同的功能更新:
const updateField = e => { setValues({ ...form, [e.target.name]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }); }; const [form, setValues] = useState({ username: '', password: '', email: '' });
[Live example,单击“注册”或“登录并尝试输入值。
我很迷路,这是什么原因造成的?
我看过this,this和this,但它们似乎与我的问题无关。
我现在才注意到这一点,但是由于某些原因,我似乎无法在使用React和NextJS构建的页面中键入某些输入字段。这仅在移动设备上发生,而在桌面上,表格可以完美运行。 ...
发生这种情况是因为我的输入之一具有此CSS规则: