Блог

Мой ввод имеет следующий код

 <InputMask
                        id='phone'
                        name='phone'
                        type='tel'
                        value={this.state.phone}
                        mask=' 63(999) 999-99-99'
                        maskChar='X'
                        onChange={(e: SyntheticEvent<HTMLInputElement>): void => {
                            this.setState({
                                phone: e.currentTarget.value.replace(/[^d. ]/g, ''),
                            });
                        }}
                        onBlur={this.validateInput}
                        onPaste={(e) => this.handlePaste(e)}
                        className='form-control'
                        placeholder='Your Phone'
                    />
 

здесь 639 цифр, которые нельзя удалить. Но когда я пытаюсь вставить номер телефона, я получаю неправильный телефон.
Например, я вставляю 639055943784
и получаю 63(963) 963-90-55 нежелательный результат.
Мой обработчик вставки — это

     handlePaste = (e) => {
    this.setState({phone: e.clipboardData.getData("Text")})
}
 

Попробуйте это

 handlePaste = (e) => {
  const number = e.clipboardData.getData("Text");
  const formattedNumber = number.replace(/639 /i, '')
  this.setState({phone: formattedNumber})
}
 

Также могут быть крайние случаи, когда вставленное значение будет содержать еще 639 с, но я думаю, вы можете получить его самостоятельно

Я создал пакет, который предоставляет входной компонент, который отображает замаскированное значение в соответствии с маской, которую он получает.

Маска изменится, сохраняя курсор в правильном положении (даже если вы измените часть значения в середине ввода, вставьте некоторые символы или удалите его часть, и даже если маска изменится).

Я создал живую демонстрацию для вашего варианта использования, используя маску 63(9XX) XXX-XX-XX и определяя пользовательские правила маски, которые используют X в качестве пользовательских символов (вместо 9 , потому что вы хотите, чтобы цифра 9 была статической в маске) и связал ее с регулярным выражением, которое принимает только цифру / число:

https://codesandbox.io/s/react-phone-mask-70fwc?file=/src/index.js:123-141

 import React from "react";
import { MaskedInput } from "react-hook-mask";

const mask = " 63(9XX) XXX-XX-XX";
const maskGenerator = {
  rules: new Map([["X", /d/]]),
  generateMask: () => mask
};

const PhoneMaskedInput = () => {
  const [value, setValue] = React.useState("");

  return (
    <div>
      <p>Phone Number:</p>
      <MaskedInput
        maskGenerator={maskGenerator}
        value={value}
        onChange={setValue}
      />
      <p>Value: {value ? " 639"   value : undefined}</p>
    </div>
  );
};
 

Вы можете увидеть демонстрацию с несколькими примерами на:

https://lucasbasquerotto.github.io/react-masked-input

Для установки пакета: npm i react-hook-mask

Этот компонент переносит значение по умолчанию input , но пакет также предоставляет перехваты, чтобы вы могли использовать его с любым компонентом, а также возможность использовать динамические маски и динамические правила (как в примере выше).

Вы можете увидеть более подробную информацию о пакете на:

https://www.npmjs.com/package/react-hook-mask