Как я могу использовать handleSubmit внутри моего компонента? - PullRequest
Новая
       41

Как я могу использовать handleSubmit внутри моего компонента?

0 голосов
/ 03 марта 2020

Я проверяю ввод с помощью formik, когда моя форма заполнена, он вызывает функцию handleSubmit, но эта функция находится за пределами моего компонента ловушки, поэтому я не могу вызвать dispatchs.

Как я могу поместить handleSubmit logi c в мой компонент крюка?

Это мой код: 

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

Но при этом моя страница перезагружается, когда я нажимаю кнопку подтверждения

Ответы [ 2 ]

1 голос
/ 03 марта 2020

Как я могу поместить handleSubmit logi c внутри

Это очень просто, не используйте 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;
0 голосов
/ 03 марта 2020

Я не совсем уверен, что правильно понял ваш вопрос. Вот что я понял: вы хотите отправлять действие Redux при отправке формы, но не можете этого сделать, поэтому вы помещаете обработчик отправки в компонент (дополнительно к тому, что в withFormik), и в результате получается, что страница перезагружается при отправке.

Пара вещей:

  • Если вы переопределите обработчик отправки внутри вашего компонента и передадите его в Form, реализацию Formik по умолчанию (которая содержит ваш обработчик отправки от withFormik) больше не применяется. Обратите внимание, что обработчик отправки принимает событие (см. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit), а не значения, которые вы предлагаете в пользовательском обработчике отправки внутри компонента. Поскольку вы затем не вызываете event.preventDefault() в своем пользовательском обработчике отправки, страница перезагружается, поскольку это поведение по умолчанию для отправки формы.
  • На самом деле вы должны иметь возможность отправлять действие Redux внутри withFormik определение. Если вы посмотрите документы Formik, handleSubmit вызывается с двумя параметрами, values и actions. Рядом с так называемыми помощниками Formik actions содержит реквизиты расширенного компонента. Следовательно, если вы подключите свой компонент к хранилищу резервов и внутри 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 ...

...