我用Formik在React中编写了以下表单:
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键提交表单时,它无法捕获事件。我尝试在<form>
元素的onSubmit
属性中记录事件,但按下Enter键时根本没有触发事件。以前使用redux-form
编写了相同的表单,Return键功能正常工作。
我最初认为这可能是由于异步表单处理,但我切换到一个常规的同步函数,它没有工作得那么好。
有没有人经历过类似的事情,如果有,请分享任何修复。
谢谢大家!
Codesandbox
4条答案
按热度按时间zf2sa74q1#
我可以通过删除您在SimpleInput组件中应用的
{...rest}
props spread来解决Codesandbox中的这个问题,这会添加一些奇怪的属性,这些属性似乎会干扰标准表单字段的行为。您可以在此处看到正确的输入时提交行为:https://codesandbox.io/s/dark-star-r0liq
在我自己的代码中,我使用的是标准的HTML
<form>
而不是Formik<Form>
,所以当我遇到这个问题时,我必须确保我的提交按钮有type="submit"
属性,以及onClick
处理程序连接到Formik的handleSubmit
方法。<button onClick={formProps.handleSubmit} type="submit" />
相关正式回购问题:https://github.com/jaredpalmer/formik/issues/1418
tpxzln5u2#
我发现解决这个问题的最好方法是在HTML表单元素(Formik的子元素)的onKeyDown事件中调用handleSubmit()方法。
2o7dmzc53#
也许尝试使用儿童 prop 与Formik如下所示:https://jaredpalmer.com/formik/docs/api/formik#children-reactreactnode-props-formikprops-values-reactnode
删除表单的表单元素,或者禁用表单的默认行为,这就是拦截回车键行为的方法。
wrrgggsh4#
如果直接将incorrectly pass all props传递给定制组件,就会遇到这个问题。如文档中所示,必须先删除
form
属性,然后才能将其余属性传递给定制组件。简言之,这是不正确的:
这是正确的: