Reactjs 如何在组件中使用handleSubmit？

我正在使用

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 schema=Yup.object（）.shape({
email:Yup.string（）.email（'email没有有效的格式'）。必需（'Fill the email！'），
密码：Yup.string（）.required（'填写密码'）
})
常数增强withFormik=withFormik({
mapPropsToValues:（）=>
({ 
电子邮件：“”，密码：“”
}),
handleSubmit:值=>{
registerFirstData（值）
},
验证装载：错误，
改变：是的，
对,对，
displayName:'RegistrForm'，
验证模式：模式
})
常量寄存器=道具=>{
常数{
价值观
感动的，
错误，
提交，
handleChange，
车把，
手推
}=道具；
返回(
...
)
}
使用Formik（寄存器）导出默认增强；

我尝试的是：

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>
    ...
    )

const Register=props=>{
const{enqueueSnackbar}=useSnackbar（）；
const handleSubmit=值=>{
console.log（值）
}
常数{
价值观
感动的，
错误，
提交，
handleChange，
车把，
//从这里移除手上的物品
}=道具；
返回(
...
)

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

我如何将handleSubmit逻辑放入

它非常简单，不要将

与Formik一起使用，而是使用
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;

const schema=Yup.object（）.shape({
email:Yup.string（）.email（'email't not have a valid format'）。必需（'Fill the email！'），
密码：Yup.string（）.required（'填写密码'）
})
常量寄存器=道具=>{
const onSubmit=值=>{
//做你想做的
//在这里，您可以使用表单值调用dispatch
console.log（值）
}
返回(
{（{值、触摸、错误、isSubmitting、handleChange、handleBlur、handleSubmit}）=>(
{/* ... */}
)}
)
}
导出默认寄存器；
我不完全确定我是否正确理解了您的问题。我理解的是：您希望在提交表单时发送一个Redux操作，但无法执行，因此您将提交处理程序放入组件中（除了
with formik
中的处理程序），结果是页面在提交时重新加载

有几件事：


如果覆盖组件内的提交处理程序并将其传递到
表单
，则Formik的默认实现（其中包含来自
withFormik
）的提交处理程序）将不再适用。请注意，提交处理程序会发生事件（请参阅），而不是组件内部的自定义提交处理程序中建议的值。由于随后不在自定义提交处理程序中调用
事件.preventDefault（）
，因此会重新加载页面，因为这是表单提交的默认行为
实际上，您应该能够使用Formik

定义在

中调度Redux操作。如果您查看Formik文档，则会使用两个参数调用
handleSubmit
，即
值
和
操作
。在所谓的Formik助手旁边，
操作
包含增强组件的道具。T因此，如果您将组件连接到redux存储，并在
mapDispatchToProps
中传入类似
dispatchMyAction
的道具，您应该能够通过调用
actions.props.dispatchMyAction
调用Formik
的
handleSubmit
函数，在
中调度操作

所以我想试试这样：

...

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));

。。。
常数增强withFormik=withFormik({
handleSubmit：（值、操作）=>{
registerFirstData（值）
actions.props.dispatchMyAction（）
},
...
})
常量寄存器=道具=>{
返回(
...
)
}
const mapDispatchToProps=调度=>{
返回{
dispatchMyAction:（）=>dispatch（myActionCreator（））
}
}
使用formik导出默认增强（connect（null，mapDispatchToProps）（Register））；

当然，如果这解决了您的问题，我无法尝试，因为您没有提供MVE…
您可以使用formik中的Form元素，并且在您单击带有类型的按钮后，将触发onSubmitsubmit@demkovych我试着这样做，你能检查我的编辑吗？
在我的钩子组件中
什么是你的
钩子组件
？