withFormik - как показать сообщение SetStatus? - PullRequest
Новая
       16

withFormik - как показать сообщение SetStatus?

0 голосов
/ 08 июля 2020

Может ли кто-нибудь знать, как я могу показать сообщение Formik setStatus в поле электронной почты в форме? 

import { Form, Checkbox, Input, Button } from 'antd';
import { withFormik } from 'formik';
import axios from 'axios';

const RegistrationForm = (props) => {
  const { values, touched, errors, handleChange,
     handleBlur,handleSubmit, setFieldValue, status,
  } = props;

    console.log(status); //undefined

  return (
          <Form onFinish={handleSubmit}>
<Form.Item
  help={touched.email && errors.email ? errors.email : ""}
  validateStatus={touched.email && errors.email ? "error" : "success"}
  label="E-mail"
  name="email"
>
  <Input
    placeholder="Email"
    value={values.email}
    onChange={handleChange}
    onBlur={handleBlur}
  />
</Form.Item>
<Form.Item>
    <Button type="primary" htmlType="submit">Submit</Button>
</Form.Item>
</Form>
  
const RegFormView = withFormik({
  validationSchema,
  mapPropsToValues: () => ({ email: ''}),

  handleSubmit: async (values, { props, setErrors, setSubmitting, setStatus }) => {
    await axios.post("/signup", values)
        .then((response) => {
          setStatus('');
          const { isAdded } = response.data;
          const statusMessage = (isAdded) ? {message: 'User Added!'} : {message: 'User Not Added!'};
          setStatus(statusMessage);
          setSubmitting(false);
          console.log('response: ', response.data);
        }, (error) => { setErrors(error);
        });
    },
})(RegistrationForm);
export default RegFormView;

Я удалил все остальные поля из формы. ответ сервера: {isAdded: false} / {isAdded: true} зависит от того, есть ли у пользователя этот адрес электронной почты или нет

1 Ответ

1 голос
/ 08 июля 2020

withFormik вводит реквизиты в ваш компонент.

Эти реквизиты являются атрибутами состояния Formik и функциями, которые позволяют вам его обновлять (например, handleChange, setFieldValue, et c ...).

Таким образом, вы можете получить статус атрибута в свойствах компонента, обернутого withFormik. 

const RegForm = (props) => {
  const { values, touched, status } = props;

  return <YourForm>
    <YourInput />
  </ YourForm>
}

export default withFormik({
  validationSchema,
  mapPropsToValues: () => ({ name: '', password: '', email: '',}),

  handleSubmit: async (values, { props, setErrors, setSubmitting, setStatus }) => {
    await axios.post("/signup", values)
        .then((response) => {
          const { isAdded } = response.data;
          const message = (isAdded) ? 'yes' : 'no';
      setStatus(message);
          setSubmitting(false);
        }, (error) => {
          setErrors(error);
        });
    },
})(RegForm);
...