Question

我有以下代码：

import React from "react";
import ReactDOM from "react-dom";
import MaskedInput from "react-text-mask";

import "./styles.scss";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
  }

  render() {
    return (
      <div className="App">
        <h1>Testing the Zip Code</h1>
        <MaskedInput
          className="zip"
          type="tel"
          placeholder="XXXXX"
          placeholderChar={"\u2000"}
          mask={[/\d/, /\d/, /\d/, /\d/, /\d/]}
          name="zip"
          value={this.state.zip}
        />
      </div>
    );
  }
}

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

为邮政编码创建一个带掩码的输入。

这里有一个现场演示：https://codesandbox.io/s/3v18yzn5rm

您可以通过执行以下操作来查看我的问题：

尝试在输入框中输入部分邮政编码，例如：“ 123”。
然后在输入框之外单击。
然后在输入框中再次单击。
您将看到结尾处有两个空格：“ 123 __”（无下划线）。
此行为会阻止您继续向前输入straigth，除非您删除了多余的空格。

当我再次在输入框中单击时，我需要输入：“ 123”（没有多余的空格）。

关于如何实现这一目标的任何想法？真烦人。

请在您的解决方案中加入上面的代码，并将链接粘贴到此处。

谢谢！

ReactJS-MaskedInput在处理邮政编码的掩码输入时增加了额外的空格

0 个答案: