javascript reactjs -按下回车键时,Formik表单不会触发提交

jchrr9hc  于 2023-02-18  发布在  Java
关注(0)|答案(4)|浏览(215)

我用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&#39;t have an account? ) &nbsp;
            <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

zf2sa74q

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

tpxzln5u

tpxzln5u2#

我发现解决这个问题的最好方法是在HTML表单元素(Formik的子元素)的onKeyDown事件中调用handleSubmit()方法。

<Formik
        initialValues={{
          login: '',
          senha: ''
        }}
        onSubmit={(values, { setErrors }) => {
          this.submitSignin(values, setErrors);
        }}
      >
        {props => {
          const {
            values,
            handleChange,
            handleBlur,
            handleSubmit,
          } = props;
          return (
            <form 
              onSubmit={handleSubmit} 
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  handleSubmit();
                }
              }}>
             <input 
               id="login"
               value={values.login}
               onChange={handleChange}
               onBlur={handleBlur} />
             <input 
               id="senha"
               value={values.senha}
               onChange={handleChange}
               onBlur={handleBlur} />
            </form>
          }
        </Formik>
2o7dmzc5

2o7dmzc53#

也许尝试使用儿童 prop 与Formik如下所示:https://jaredpalmer.com/formik/docs/api/formik#children-reactreactnode-props-formikprops-values-reactnode
删除表单的表单元素,或者禁用表单的默认行为,这就是拦截回车键行为的方法。

wrrgggsh

wrrgggsh4#

如果直接将incorrectly pass all props传递给定制组件,就会遇到这个问题。如文档中所示,必须先删除form属性,然后才能将其余属性传递给定制组件。
简言之,这是不正确的:

const CustomInput = (props: React.InputHTMLAttributes<HTMLInputElement> & FieldProps) => {
  return <input {...props} />;
};

这是正确的:

const CustomInput = (props: React.InputHTMLAttributes<HTMLInputElement> & FieldProps) => {
  const { form, field, ...rest } = props;
  return <input {...field} {...rest} />;
};

相关问题