ReactJS - MaskedInput добавляет дополнительные пробелы при работе с маскированным вводом почтового индекса - PullRequest
Новая
       33

ReactJS - MaskedInput добавляет дополнительные пробелы при работе с маскированным вводом почтового индекса

0 голосов
/ 20 марта 2019

У меня есть следующий код: 

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__" (без подчеркивания).
  • Это поведение не позволяет вампродолжайте печатать прямо вперед, пока вы не удалите эти лишние пробелы.

Мне нужно, чтобы при повторном щелчке внутри поля ввода у меня было: «123» (без лишних пробелов).

Любойидея о том, как этого добиться?Это действительно раздражает.

Пожалуйста, раскройте приведенный выше код с вашим решением и вставьте ссылку сюда.

Спасибо!

...