В этом сообщении блога мы погрузимся в мир ввода валюты в React и рассмотрим различные методы эффективного управления этим процессом. Независимо от того, создаете ли вы сайт электронной коммерции, финансовое приложение или просто хотите проверить и отформатировать вводимые данные о валюте, мы предоставим вам все необходимое. Итак, давайте засучим рукава и изучим несколько практических приемов!

Метод 1: использование библиотек маскирования ввода.
Одним из популярных подходов является использование библиотек маскирования ввода, таких как React Input Mask или React Currency Input. Эти библиотеки предоставляют готовые компоненты, которые автоматически форматируют введенную валюту по мере ввода пользователем. Посмотрите следующий фрагмент кода:

import React from 'react';
import CurrencyInput from 'react-currency-input';
const CurrencyInputExample = () => {
  const handleInputChange = (event, maskedValue, floatValue) => {
    // Handle the currency input change
  };
  return (
    <CurrencyInput
      prefix="$"
      decimalSeparator="."
      thousandSeparator=","
      precision={2}
      onChange={handleInputChange}
    />
  );
};
export default CurrencyInputExample;

Метод 2: пользовательские функции форматирования
Если вы предпочитаете больше контроля над форматированием, вы можете написать собственные функции для обработки ввода валюты. Вот пример:

import React, { useState } from 'react';
const CurrencyInputExample = () => {
  const [value, setValue] = useState('');
  const handleInputChange = (event) => {
    const inputValue = event.target.value;
    // Remove non-numeric characters from the input value
    const numericValue = inputValue.replace(/[^0-9.]/g, '');
    // Format the numeric value as currency
    const formattedValue = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(numericValue);
    setValue(formattedValue);
  };
  return (
    <input type="text" value={value} onChange={handleInputChange} />
  );
};
export default CurrencyInputExample;

Метод 3. Регулярные выражения для проверки
Проверка входных данных о валюте имеет решающее значение для обеспечения целостности данных. Регулярные выражения могут помочь в этом. Вот пример проверки ввода валюты с помощью регулярного выражения:

const isValidCurrency = (value) => {
  const currencyRegex = /^\$?(\d{1,3}(,\d{3})*(\.\d{1,2})?|\.\d{1,2})$/;
  return currencyRegex.test(value);
};
console.log(isValidCurrency('$1,234.56')); // true
console.log(isValidCurrency('$1.234,56')); // false

Используя библиотеки маскирования ввода, создавая собственные функции форматирования и используя регулярные выражения для проверки, вы можете освоить ввод валюты в React. Если вам нужно создать динамическую форму или проверить вводимые пользователем данные, эти методы помогут вам достичь желаемой функциональности. Приятного кодирования!