Блог

Привет, нужно замаскировать номер мобильного телефона, когда пользователь вводит номер мобильного телефона в поле ввода, он должен быть 021 121 4544 в этом формате. означает, что должно быть 021 {автопробеление}121{автопробеление} 4544 как я могу встроить в react эту функциональность?

 class NumberCheck extends Component {
    state = {
        disabled: true,
        errorBlock: 'none',
        mobileNumber: '',
        error: ''
    };

handleOnChange = (event) => {
    let disabled = event.target.value ? disabled = false : disabled = true;
    this.setState({
        disabled: disabled,
        mobileNumber: event.target.value
    })
}

submit = (e) => {
    e.preventDefault();
    if (this.state.mobileNumber.match(/^02[0-9]{6,11}$/)) {
        this.setState({
            errorBlock: 'none'
        })
        const payload = {
            msisdn: this.state.mobileNumber
        }
        this.props.checkNumber(payload);
    } else {
        this.setState({
            error: ' Please enter valid mobile no',
            errorBlock: 'block'
        })

    }

}

render() {
    const { isLoading, isError } = this.props;
    if (isLoading) {
        return <Spinner />
    }
    if (isError) {
        return <ChangePlanError />
    }
    return (
        <form className="spring spring--sm">
            <p className="heading heading--3 heading--center no-gutter--top">{"Already with Vodafone?"}</p>
            <p className="heading--center">{"Sign in using a TXT code to check if you are eligible to upgrade or change your plan"}</p>
            <div className="alert alert--light alert--warning alert--arrow validation__warning" style={{ display: this.state.errorBlock }}>
                <div className="caption">
                    < div className="caption__media caption__media--top alert__media" >
                        <svg className="icon icon--extra-small icon--inherited" data-vft="icon-modifiers">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#icon-block" />
                        </svg>
                    </div>
                    <div className="caption__text caption__text--top alert__text">
                        {this.state.error}
                    </div>
                </div>
            </div>
            <input
                type="text"
                onChange={this.handleOnChange}
                className="form__input form__input--dark"
                name="mobileno"
                placeholder="021 1234567"
                mask="000 000 0000" />
            <div id="submit" className="form__row form__row--medium gutter--bottom">
                <input
                    type="submit"
                    className={`button button--primary button--primary--grey button--full-width ${this.state.disabled ? 'button--disabled' : ''}`}
                    value=" Continue"
                    onClick={this.submit} />
            </div>
        </form >
    );
}
  

}

Вы можете создать новую строку с предыдущей строкой и заменить ее во входных данных.

 const number = '0211214544';
const num = `${number.substring(0, 3)} ${number.substring(3, 6)} ${number.substring(6, number.length)}`;

console.log(num);  

Создал рабочий пример в React.

 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: ''
    };
  }

  change = (event) => {
    let val = event.target.value;
    val = val.replace(/ /gm, '');
    console.log(val);

    let num = `${val.substring(0, 3)} ${val.substring(3, 6)} ${val.substring(6, val.length)}`;

    num = num.trim();

    this.setState({
      name: num
    });
  };

  render() {
    return (
      <div className="App">
        <input
          ref="inputName"
          value={this.state.name}
          onChange={this.change}
        />
      </div>
    );
  }
}

export default App;
  

Приведенная ниже функция будет маскировать номер телефона, основной операцией для выполнения таких функций является нарезка / подстрока и конкатенация строк

 maskingFunction= (phoneNumber)=>{
  let subNum = phoneNumber.toString().substring(0,3)
   subNum = subNum   "XXXXXXXXXXXX"
   return subNum
}
  

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

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

Демонстрационную версию с примерами можно посмотреть на:

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

(В первом примере вводится маска, заданная в этом вопросе SO: 999 999 9999 ).

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

Используйте это:

 import { MaskedInput, createDefaultMaskGenerator } from 'react-hook-mask';

const maskGenerator = createDefaultMaskGenerator('999 999 9999');

const MobileNumberMaskedInput = () => {
    const [value, setValue] = React.useState('');

    return (
        <MaskedInput
            maskGenerator={maskGenerator}
            value={value}
            onChange={setValue}
        />
    );
};
  

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

Функция createDefaultMaskGenerator , которая всегда возвращает статическую строковую маску. Вы также можете использовать динамические маски, которые изменяются в соответствии со значением и даже преобразуют значение (например, делая символы прописными).

Перехват useMask — это универсальный перехват, который можно использовать с любым компонентом (даже с собственными компонентами), если у компонента есть способ извлекать и изменять положение курсора.

Хук useRefMask переносит useMask и предоставляет простой способ пересылки ссылки в компонент, а также использования ref элемента в функциях, которые управляют положением курсора (Пример).

(Более конкретный) хук useWebMask переносится useRefMask и может использоваться с любым пользовательским react-dom компонентом, который переносит an input и чей ref является an HTMLInputElement , без необходимости определять получатель и установщик для позиции курсора, а также с onChange функцией, которая устанавливает значение, полученное от объекта события (пример).