我如何在我的组件中使用 handleSubmit？

Question

我正在使用 formik 进行输入验证，当我填写表单时他调用函数 handleSubmit，但是这个函数在我的钩子组件之外，所以我不能调用 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);

我尝试了什么：

const Register = props => {

    const { enqueueSnackbar } = useSnackbar();

    const handleSubmit = values => {
      console.log(values)
    }

     const {
        values,
        touched,
        errors,
        isSubmitting,
        handleChange,
        handleBlur,
        // Removed handleSubmit from here
    } = props;

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

但是当我点击我的提交按钮时，我的页面会重新加载

Answer 1

How I can put the handleSubmit logic inside

很简单，不用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 文档，会使用两个参数 values 和 actions 调用 handleSubmit。在所谓的 Formik 助手旁边，actions 包含增强组件的道具。因此，如果你将你的组件连接到 redux store 并在 mapDispatchToProps 中传递一个像 dispatchMyAction 这样的道具，你应该能够在 withFormik 的 handleSubmit 中调度一个动作通过调用 actions.props.dispatchMyAction.

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

...

const enhanceWithFormik = withFormik({
  handleSubmit: (values, actions) => {
    registerFirstData(values)
    actions.props.dispatchMyAction()
  },
  ...
})

const Register = props => {
  return (
    <Form className={classes.form} noValidate>
      ...
    </Form>
  )
}

const mapDispatchToProps = dispatch => {
  return {
    dispatchMyAction: () => dispatch(myActionCreator())
  }
}

export default enhanceWithFormik(connect(null, mapDispatchToProps)(Register));

当然，如果这能解决您的问题，我无法尝试，因为您没有提供 MVE...

我如何在我的组件中使用 handleSubmit？

How i can use the handleSubmit inside my component?

jsx

reactjs

formik