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

Метод 1: проверка регулярных выражений
Один простой способ избежать двух десятичных знаков — использовать регулярные выражения (регулярные выражения) для проверки поля ввода. Вот пример того, как это можно реализовать в компоненте React:

import React, { useState } from 'react';
const DecimalInput = () => {
  const [value, setValue] = useState('');
  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    const regex = /^\d*\.?\d*$/; // Regex pattern to allow only one decimal
    if (regex.test(inputValue)) {
      setValue(inputValue);
    }
  };
  return (
    <input
      type="number"
      value={value}
      onChange={handleInputChange}
      placeholder="Enter a decimal value"
    />
  );
};
export default DecimalInput;

В приведенном выше фрагменте кода мы определяем шаблон регулярного выражения (/^\d*\.?\d*$/), который допускает ноль или более цифр до и после одной десятичной точки. Метод test()проверяет, соответствует ли текущее входное значение шаблону, и только затем обновляет состояние с помощью setValue().

Метод 2: прослушиватель событий и манипулирование
Другой подход предполагает подключение прослушивателя событий к полю ввода и манипулирование входным значением, чтобы разрешить только одну десятичную точку. Вот пример:

import React, { useState } from 'react';
const DecimalInput = () => {
  const [value, setValue] = useState('');
  const handleInputChange = (e) => {
    let inputValue = e.target.value;
    if (inputValue.split('.').length > 2) {
      // If there are more than one decimal points, remove the excess
      inputValue = inputValue.slice(0, inputValue.lastIndexOf('.'));
    }
    setValue(inputValue);
  };
  return (
    <input
      type="number"
      value={value}
      onChange={handleInputChange}
      placeholder="Enter a decimal value"
    />
  );
};
export default DecimalInput;

В этом методе мы разделяем входное значение по десятичной точке (.) и проверяем, содержит ли результирующий массив более двух элементов. Если это так, мы удаляем лишние десятичные точки с помощью метода slice()и соответствующим образом обновляем состояние.

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