Question

我正在使用formik进行输入验证，当我填写表单时，他调用了函数handleSubmit，但是此函数在我的hook组件之外，所以我不能调用{{1} }。

如何将dispatchs逻辑放入钩子组件中？

这是我的代码：

handleSubmit

我尝试过的事情：

const schema = Yup.object().shape({
  email: Yup.string().email('Email don't have a valid format').required('Fill the email!'),
  password: Yup.string().required('Fill the password')
})

const enhanceWithFormik = withFormik({
  mapPropsToValues: () => 
  ({ 
      email: '', password: ''
  }),
  handleSubmit: values => {
    registerFirstData(values)
  },
  validateOnMount: false,
  validateOnChange: true,
  validateOnBlur: true,
  displayName: 'RegistrarForm',
  validationSchema: schema
})

const Register = props => {

const {
  values,
  touched,
  errors,
  isSubmitting,
  handleChange,
  handleBlur,
  handleSubmit
} = props;

return (
  <form onSubmit={handleSubmit} className={classes.form} noValidate>
   ...
  </form>
)
}

export default enhanceWithFormik(Register);

但是这样，当我单击“提交”按钮时，页面会重新加载

Answer 1

我如何将handleSubmit逻辑放入

这非常简单，不要使用withFormik并使用Formik组件。

const schema = Yup.object().shape({
    email: Yup.string().email('Email don\'t have a valid format').required('Fill the email!'),
    password: Yup.string().required('Fill the password')
})

const Register = props => {

    const onSubmit = values => {
        // Do what you want
        // Here you can call dispatch with the form values
        console.log(values)
    }

    return (
        <Formik
            initialValues={{
                email: '', password: ''
            }}
            validateOnMount={false}
            displayName='RegistrarForm'
            validationSchema={schema}
            onSubmit={onSubmit}
        >
            {({ values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
                <Form onSubmit={handleSubmit} className={classes.form} noValidate>
                    {/* ... */}
                </Form>
            )}
        </Formik>
    )
}

export default Register;

Answer 2

我不确定我是否正确理解了您的问题。这是我的理解：您想在提交表单时调度Redux操作，但不能执行此操作，因此您将提交处理程序放入组件中（除了withFormik中的那个），结果是页面在提交时重新加载。

几件事：

如果您覆盖组件内部的提交处理程序并将其传递给Form，则Formik的默认实现（包含来自withFormik的提交处理程序）不再适用。请注意，提交处理程序会发生一个事件（请参见https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit），而不是您在组件内部的自定义提交处理程序中建议的值。然后，由于您没有在自定义提交处理程序中调用event.preventDefault()，因此页面将重新加载，因为这是表单提交的默认行为。
实际上，您应该能够在withFormik定义内调度Redux操作。如果您签出Formik文档，则会使用两个参数handleSubmit和values来调用actions。 actions在所谓的Formik帮助器旁边，包含增强组件的支持。因此，如果您将组件连接到redux存储，并在mapDispatchToProps内传递dispatchMyAction之类的道具，则应该能够在withFormik的{{1}}内调度操作调用handleSubmit来实现功能。

所以我会尝试这样的事情：

actions.props.dispatchMyAction

我当然不能尝试解决问题，因为您没有提供MVE ...

我如何在组件内部使用handleSubmit？

2 个答案: