为什么在使用 react-input-mask 和 formik 时光标会跳到输入的末尾？

Question

我正在尝试使用 react-input-mask 和 formik 来屏蔽输入。我在 formik 之外使用了这个屏蔽输入并且它按预期工作，但是对于 formik 输入中的值没有得到更新，并且光标一直跳到输入的末尾。

这里是 codesanbox 以查看问题和实际代码。

代码一目了然。

import React from "react";
import ReactDOM from "react-dom";
import { useFormik } from "formik";
import Inputmask from "react-input-mask";
import Yup from "yup";

import "./styles.css";

function App() {
  const formik = useFormik({
    initialValues: {
      dob: ""
    }
  });
  return (
    <Inputmask
      type="text"
      name="dob"
      mask="00-00-0000"
      alwaysShowMask
      onChange={formik.handleChange}
      value={formik.values.dob}
      onBlur={formik.handleBlur}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我哪里错了？

Answer 1

您的问题是您没有正确申报您的口罩。如果您只想使用数字，则声明掩码的方法是使用数字 9。在您的情况下，您将声明 mask 道具如下：

mask="99-99-9999"

在此处查看文档 https://github.com/sanniassin/react-input-mask#mask

并在此处查看工作代码沙箱 https://codesandbox.io/s/objective-sea-hve91

为什么在使用 react-input-mask 和 formik 时光标会跳到输入的末尾？

Why does the cursor jump to end of the input when using react-input-mask along with formik?

javascript

reactjs

formik

react-hooks