Одним из важнейших компонентов пользовательского ввода в современных веб-приложениях является сбор номеров мобильных телефонов. В этой статье мы рассмотрим различные методы обработки ввода номера мобильного телефона в React JS. Мы подробно рассмотрим примеры кода для каждого метода, чтобы вы имели четкое представление о том, как их реализовать в своих проектах.

1. Ввод обычного текста.
   Самый простой способ — использовать обычное поле ввода текста и применить логику проверки, чтобы убедиться, что введенное значение является действительным номером мобильного телефона. Вот пример:

import React, { useState } from 'react';
const MobileNumberInput = () => {
  const [mobileNumber, setMobileNumber] = useState('');
  const handleInputChange = (e) => {
    const input = e.target.value.replace(/\D/g, ''); // Remove non-numeric characters
    setMobileNumber(input);
  };
  return (
    <input
      type="text"
      value={mobileNumber}
      onChange={handleInputChange}
      placeholder="Enter your mobile number"
    />
  );
};
export default MobileNumberInput;

2. Маскированный ввод.
   Маскированный ввод обеспечивает более удобный способ ввода номеров мобильных телефонов за счет автоматического форматирования ввода по мере ввода пользователем. Для этого можно использовать библиотеку response-input-mask:

npm install react-input-mask

import React from 'react';
import InputMask from 'react-input-mask';
const MobileNumberInput = () => {
  return (
    <InputMask
      mask="+1 (999) 999-9999"
      maskChar="_"
      placeholder="Enter your mobile number"
    />
  );
};
export default MobileNumberInput;

3. Выбор кода страны.
   Если вы требуете, чтобы пользователи вводили код страны вместе с номером мобильного телефона, вы можете предоставить раскрывающийся список или селектор для выбора кода страны. Вот пример использования библиотеки реакции-выбора:

npm install react-select

import React, { useState } from 'react';
import Select from 'react-select';
const MobileNumberInput = () => {
  const [selectedCountryCode, setSelectedCountryCode] = useState(null);
  const [mobileNumber, setMobileNumber] = useState('');
  const handleCountryCodeChange = (selectedOption) => {
    setSelectedCountryCode(selectedOption);
  };
  const handleMobileNumberChange = (e) => {
    const input = e.target.value.replace(/\D/g, '');
    setMobileNumber(input);
  };
  return (
    <div>
      <Select
        value={selectedCountryCode}
        onChange={handleCountryCodeChange}
        options={countryCodeOptions}
        placeholder="Select country code"
      />
      <input
        type="text"
        value={mobileNumber}
        onChange={handleMobileNumberChange}
        placeholder="Enter your mobile number"
      />
    </div>
  );
};
export default MobileNumberInput;

В этой статье мы рассмотрели различные методы обработки ввода номера мобильного телефона в React JS. Мы рассмотрели простой ввод текста с проверкой, маскированный ввод для лучшего взаимодействия с пользователем и селекторы кода страны для сбора мобильных номеров для конкретной страны. Реализуя эти методы, вы можете расширить возможности ввода форм и обеспечить удобство работы для пользователей.

Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего проекта и ожиданиям пользователей. Приятного кодирования!