在formik和formik-antd中使用react-input-mask

Question

我将aws cloudformation deploy --template-file ${TEMPLATE_FILE_PATH} --stack-name ${CF_STACK_NAME} --parameter-overrides ${PARAMETER_OVERRIDES} --no-fail-on-empty-changeset与formik一起使用。我需要对输入应用掩码@jbuschke/formik-antd，所以我想使用+7 (___) ___-__-__。

同时，我需要解析值并删除react-input-mask和数字以外的符号，因此我自己处理+和onChange。我可以在控制台日志中得到setFieldValue，但是在提交时我得到的是初始值，而不是更改后的值。

这是我的代码和demo：

changedValue

如何解决？

Answer 1

问题是您解析了该值，但没有在任何地方更新它，因此changedValue在作用域的末尾死亡。

将解析移动到onSubmit回调中，不仅您可以在每个渲染器上进行不必要的解析，而且解析状态也不需要其他状态。

提示：使用单个regex表达式，不需要那么多替换。

const CloseForm = () => (
  <Formik
    initialValues={{ phone: '' }}
    onSubmit={(value, { setSubmitting }) => {
      const changedValue = value.phone
        .replace(/\)/g, '')
        .replace(/\(/g, '')
        .replace(/-/g, '')
        .replace(/ /g, '');

      setTimeout(() => {
        alert(JSON.stringify(changedValue, null, 2));
        setSubmitting(false);
      }, 400);
    }}
    validate={handleValidate}
  >
    {({ isSubmitting, values, setFieldValue }) => {
      return (
        <Form>
          <FormItem name="phone" label="Phone" required="true">
            <CustomInput
              mask="+7 (999) 999-99-99"
              name="phone"
              onChange={e => {
                const value = e.target.value || '';
                console.log({ value });
                setFieldValue('phone', value);
              }}
            />
          </FormItem>
          <SubmitButton type="primary" disabled={isSubmitting}>
            Submit
          </SubmitButton>
          <pre>{JSON.stringify(values, null, 2)}</pre>
        </Form>
      );
    }}
  </Formik>
);