Я только сейчас заметил это, но по какой-то причине я не могу ввести некоторые поля ввода на моей странице, созданной с помощью 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: ''
});
Живой пример , нажмите «Зарегистрироваться» или «Войти» и попробуйте ввести значения.
Я довольно растерян, что это вызывает?
Я смотрел на * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * '' 'не имеет отношения к моей проблеме ”.