在不使用插件的情况下屏蔽 React 中的字段

Question

我需要在 React 中将 SSN 字段屏蔽为 123-45-6789，

我的目标是在不使用 react-input-mask、input-mask 等插件的情况下做到这一点

My input 123456789
Expected input 123-45-6789

我们能做到吗？通过正则表达式或没有插件的东西。

如有任何帮助，我们将不胜感激。

Answer 1

您可以在 onChange 事件期间使用正则表达式，如下所示：

_onInputChange = (event) => {
    var string = event.target.value;
    string = string.replace(/-/g, "");
    var regex = /^([^\s]{3})([^\s]{2})([^\s]{4})$/g;
    var match = regex.exec(string);
    if (match) {
      match.shift();
      string = match.join("-")
    }
    this.setState({ssn: string});
}

这是一个有效的 fiddle

然而，这只会在输入完整数字后屏蔽该值。

在不使用插件的情况下屏蔽 React 中的字段

Masking a field in React without using plugins

javascript

regex

masking

reactjs