У меня есть следующая форма, написанная на React с использованием Formik:
import React, { FunctionComponent } from 'react';
import { NavLink } from 'react-router-dom';
import { object, string } from 'yup';
import { Formik, FormikActions, Field, FormikProps } from 'formik';
import SimpleInput from './Fields/SimpleInput';
import FieldError from './Fields/FieldError';
interface FormValues {
email: string;
password: string;
}
interface OwnProps {
onSubmit: (data: FormValues) => any;
}
const validationSchema = object().shape({
email: string()
.email('Please enter a valid email address')
.required('Email is a required field'),
password: string()
.min(8)
.required('Password is a required field'),
});
type Props = OwnProps;
const LoginForm: FunctionComponent<Props> = ({ onSubmit }) => {
const initialValues = {
email: '',
password: '',
};
const onFormSubmit = async (values: FormValues, { setSubmitting }: FormikActions<FormValues>) => {
await onSubmit(values);
setSubmitting(false);
};
return (
<Formik
onSubmit={onFormSubmit}
initialValues={initialValues}
validationSchema={validationSchema}
render={({ handleSubmit, isSubmitting }: FormikProps<FormValues>) => (
<form className="ipx-form sign" onSubmit={handleSubmit}>
<h1>Sign in</h1>
<div className="ipx-register-here">
( Don't have an account? )
<NavLink to="/register">Register here</NavLink>
</div>
<br />
<Field name="email" type="email" component={SimpleInput} label="Email Address" placeholder="Email" />
<FieldError name="email" />
<br />
<br />
<div className="fields">
<Field name="password" type="password" component={SimpleInput} label="Password" placeholder="Password" />
<FieldError name="password" />
</div>
<br />
Forgot <NavLink to="/forgot-password">password?</NavLink>
<br />
<button className="button ipx-submit-button" id="ipx-login-submit" type="submit" disabled={isSubmitting}>
<span className="ladda-label">Sign in</span>
</button>
</form>
)}
/>
);
};
export default LoginForm;
Что работает нормально, если я нажимаю кнопку для отправки формы (она отправляет действие Redux и регистрирует пользователя), однако, когда я пытаюсь отправить форму нажатием клавиши Return / Enter, она не может перехватить событие. Я попытался записать событие в подпункт onSubmit
элемента <form>
, но ни одно событие не вызывалось при нажатии Enter вообще. Эта же форма была ранее написана с использованием redux-form
, и функциональность клавиши возврата работала как надо.
Сначала я думал, что это может быть связано с асинхронной обработкой форм, но я переключился на обычную синхронную функцию, и она также не работала.
Кто-нибудь когда-либо испытывал нечто подобное, и если да, то поделитесь, пожалуйста, любыми исправлениями.
Спасибо!
Codesandbox