reactjs - 将 react-input-mask 与 formik 和 formik-antd 一起使用

Question

我正在formik使用@jbuschke/formik-antd. 我需要对+7 (___) ___-__-__输入应用掩码，所以我想使用react-input-mask.

同时我需要解析值并删除除和数字之外的符号，+所以我自己处理。我可以进入控制台日志，但是在提交时我得到的是初始值，而不是更改后的值。onChangesetFieldValuechangedValue

这是我的代码和演示：

const CustomInput = props => (
  <InputMask {...props}>{inputProps => <Input {...inputProps} />}</InputMask>
);

const CloseForm = () => (
  <Formik
    initialValues={{ phone: "" }}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
    validate={handleValidate}
  >
    {({ isSubmitting, values, setFieldValue }) => {
      return (
        <Form>
          <FormItem name="phone" label="Phone" required="true">
            <CustomInput
              mask="[phone]"
              name="phone"
              onChange={e => {
                const value = e.target.value || "";
                const changedValue = value
                  .replace(/\)/g, "")
                  .replace(/\(/g, "")
                  .replace(/-/g, "")
                  .replace(/ /g, "");
                console.log({ value });
                console.log({ changedValue });
                setFieldValue("phone", value);
              }}
            />
          </FormItem>
          <SubmitButton type="primary" disabled={isSubmitting}>
            Submit
          </SubmitButton>
          <pre>{JSON.stringify(values, null, 2)}</pre>
        </Form>
      );
    }}
  </Formik>
);

如何修复？

标签： reactjsantdformik

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="[phone]"
              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>
);