Question

我正在将formik与@jbuschke/formik-antd和react-input-mask一起使用。我对输入之一应用了掩码+7 (___) ___-__-__，我需要对其进行解析onSubmit，以删除不必要的符号。

我已经定义了一个常量changedValue，然后在setFieldValue中使用它，但是出现以下错误：

Invariant Violation
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

这是我的代码和demo：

const CloseForm = () => (
  <Formik
    initialValues={{ phone: "", email: "" }}
    onSubmit={(values, { setSubmitting, setFieldValue }) => {
      const changedValue = values.phone.replace(/\(|\)|\s|-/g, "");
      setTimeout(() => {
        setFieldValue("phone", changedValue);
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
    validate={validatePhone}
  >
    {({ isSubmitting, values, handleChange }) => {
      return (
        <Form>
          <FormItem name="phone" label="Phone" required="true">
            <CustomInput
              mask="+7 (999) 999-99-99"
              name="phone"
              onChange={handleChange}
            />
          </FormItem>
          <FormItem name="email" label="Email">
            <Input name="email" />
          </FormItem>
          <SubmitButton type="primary" disabled={isSubmitting}>
            Submit
          </SubmitButton>
          <pre>{JSON.stringify(values, null, 2)}</pre>
        </Form>
      );
    }}
  </Formik>
);

如何解决此问题？还是有更好的方法使用setFieldValue来解析值？

Answer 1

您可以在不更改字段的情况下修改要提交的值，例如：

onSubmit={values => {
  const phone = values.phone.replace(/\(|\)|\s|-/g, "")
  const valuesToSend = { ...values, phone }

  alert(JSON.stringify(valuesToSend, null, 2))
}}

在Formik中使用setFieldValue onSubmit

1 个答案: