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

与formik一起使用react-input-mask时，为什么光标会跳到输入的结尾？

1 个答案: