Formik onSubmit - удалить форму и сообщение об успехе - PullRequest
Новая
       13

Formik onSubmit - удалить форму и сообщение об успехе

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

Это первый раз, когда я использую Formik, и у меня возникают следующие проблемы: я создал эту форму, используя стартовый набор, предоставленный в документации Formik, и он работает, но я хотел бы показать сообщение об успехе и удалите форму, когда ax ios вернется со статусом 200.

Итак,
1. Как мне указать ссылку на форму внутри вызова ax ios? обычно это так просто, как e.target, но событие, кажется, недоступно в Formik.
2. Как мне получить доступ к состоянию формы в Formik? для переключения сообщения об успехе.

Полный код доступен здесь: https://codesandbox.io/s/throbbing-water-ffl2w

Заранее большое спасибо. 

    <Formik
      initialValues={{
        firstName: "",
        lastName: "",
        email: ""
      }}
      // initialStatus={{ // resetForm(); resets this
      //   sent: "nope"
      // }}
      onSubmit={(
        values: Values,
        { setStatus, setSubmitting, resetForm }: FormikActions<Values>
      ) => {
        axios({
          method: "post",
          url: "https://getform.io/f/15faef97-5703-4799-930d-c3e698c99967",
          data: { email: values.email, values }
        }).then(r => {
          setSubmitting(false);
          setStatus("sent");
          //resetForm();
          console.log("Thanks!");
        });
      }}
      render={() => (
        <Form>
          <label htmlFor="firstName">First Name</label>
          <Field
            id="firstName"
            name="firstName"
            placeholder="John"
            type="text"
          />

          <label htmlFor="lastName">Last Name</label>
          <Field id="lastName" name="lastName" placeholder="Doe" type="text" />

          <label htmlFor="email">Email</label>
          <Field
            id="email"
            name="email"
            placeholder="john@acme.com"
            type="email"
          />

          <button type="submit" style={{ display: "block" }}>
            Submit
          </button>
        </Form>
      )}
    />

Ответы [ 3 ]

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

Я рекомендую использовать состояние для управления тем, что показывать в вашем компоненте (по какой-то причине я не могу сохранить коды и поле): 

const BasicForm: React.FC<{}> = () => {
  const [isSent, setIsSent] = React.useState(false);

затем обратный вызов выборки: 

.then(r =>
...
    setIsSent(true);

Наконец, в вашей функции рендеринга 

render={({ isSubmitting, status }) =>
          !isSent ?
            <Form> ... </Form>:
            <div>Success</div>
1 голос
/ 28 марта 2020

Это устаревшая версия Formik v1.1.2, и я бы не рекомендовал ее использовать, поскольку есть некоторые критические изменения , такие как render, метод устарел и будет удален в будущих версиях. Возможно, вы захотите использовать текущую версию v2.1.4

  1. как мне указать ссылку на форму внутри вызова ax ios?

Formik передает объект values ​​ вместе с другими методами (называемыми FormikBag ) внутри onSubmit проп. Вы можете передать эти значения непосредственно ax ios без необходимости использования собственных методов onSubmit или onChange. Обратите внимание, что <Formik> компонент имеет другие реквизиты . это даст вам практически полный контроль / доступ для ваших нужд. Тем не менее, я бы рекомендовал использовать только состояние / методы Formik, чтобы избежать каких-либо побочных эффектов или ошибок, связанных с несколькими состояниями или обработчиками.

v2 Общий синтаксис: 

<Formik
   initialValues={initialValues}
   // Other Formik props...
   onSubmit = {(Object: form values, Object: Formik Bag ) => {
     // access form values...
   }}
>
 // Access render methods and props (children props)
 {(props) => {
    return (
      <Form>
        <Field> ...
      </Form>
     )
   }
 }
</Formik>

топор ios Пример: 

<Formik
  initialValues={initialValues}
  onSubmit={(values) => {
    console.log(values) // Object holds your form values
    axios({
      method: "post",
      url: "url",
      data: { values }
    })
  })
/>
как мне получить доступ к состоянию формы в Formik? для переключения сообщения об успехе.

Вы можете использовать метод Formik setStatus из FormikBag внутри вашего onSubmit , чтобы передать ваш Статус ответа сервера, затем вы можете получить доступ к этому status через children props Вот пример: 


<Formik
  initialValues={initialValues}
  onSubmit={(values, setStatus) => {
    axios({
      method: "post",
      url: "url",
      data: { values }
    })
    .then(res => {
      if (res.status === 200) {
        // 200 means POST method response with success 
        // Pass your server response to Formik
        setStatus({
          sent: true,
          msg: "Message has been sent! Thanks!"
          // Pass more if you need
        })
      }
    })
    .catch(err => {
      // Something went wrong
      setStatus({
        sent: false,
        msg: `Error! ${err}. Please try again later.`
      })
    })
  })
>

  // Later in your code destructuring the children props and use it like so:
  {({ status }) => ( 
    <Form>
      <Field ... />
        {status && status.msg && (
          <p className={`alert ${ status.sent ? "alert-success" : "alert-error"}`}>
            {status.msg}
          </p>
       )}
     <button>Submit</button>
    </Form>
  )}

</Formik>

Я сделал форк вашего CodeSanbox и обновил версии / синтаксис зависимостей в этом codeSandbox Пример. Обратите внимание, что я не эксперт по машинописи.

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

render - это функция, которая получает реквизит. Я вижу, что вы используете setStatus, поэтому вы можете получить status из props и внести изменения в Компонент формы

...