InputNumber

Компонент InputNumber предназначен для ввода числовых значений с поддержкой различных ограничений, шагов, форматов отображения и обработки событий. Он является частью библиотеки Ant Design для JavaScript и тесно интегрирован с React.

Импорт и базовое использование

Для использования компонента необходимо импортировать его из библиотеки:

import { InputNumber } from 'antd';

Простейший пример:

<InputNumber />

В этом случае компонент отобразит обычное поле ввода с кнопками увеличения и уменьшения значения.

Основные свойства

  • value / defaultValue – задают текущее и начальное значение.
  • min / max – ограничивают диапазон чисел.
  • step – определяет шаг изменения значения при нажатии кнопок или стрелок клавиатуры.
  • disabled – делает компонент недоступным для ввода.
  • formatter / parser – функции для отображения значения и его преобразования из текста в число.
  • precision – количество знаков после запятой.
  • onChange – обработчик изменения значения.

Пример с ограничением и шагом:

<InputNumber min={0} max={100} step={5} defaultValue={10} />

Здесь пользователь может выбрать значения от 0 до 100 с шагом 5.

Форматирование и парсинг

formatter позволяет изменить отображение значения, например, добавить валютный символ:

<InputNumber
  min={0}
  defaultValue={1000}
  formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
  parser={value => value.replace(/\$\s?|(,*)/g, '')}
/>
  • formatter изменяет отображение числа для удобства визуализации.
  • parser преобразует введённый текст обратно в число.

Работа с событиями

Компонент поддерживает несколько событий:

  • onChange(value) – вызывается при изменении значения.
  • onFocus(event) и onBlur(event) – стандартные события фокуса.
  • onStep(value, info) – вызывается при нажатии кнопок увеличения/уменьшения, где info указывает направление (‘up’ или ‘down’).

Пример:

<InputNumber
  min={0}
  max={10}
  onCha nge={value => console.log('Изменено значение:', value)}
  onS tep={(value, info) => console.log(info, value)}
/>

Настройка точности

Свойство precision позволяет ограничить количество знаков после запятой:

<InputNumber
  min={0}
  max={10}
  step={0.1}
  precision={2}
/>

При этом введённые пользователем значения автоматически округляются до двух знаков после запятой.

Доступность и управление клавиатурой

  • Стрелки вверх и вниз увеличивают или уменьшают значение на step.
  • Поддерживается использование Tab для перехода между полями.
  • При установке disabled={true} компонент становится недоступным для редактирования и клика мышью.

Контроль состояния через React

InputNumber хорошо интегрируется с состоянием React. Пример контролируемого компонента:

import { useState } from 'react';
import { InputNumber } from 'antd';

const ControlledInputNumber = () => {
  const [value, setValue] = useState(5);

  return (
    <InputNumber
      min={0}
      max={20}
      value={value}
      onCha nge={setValue}
    />
  );
};

Изменение состояния через onChange позволяет синхронизировать значение с другими элементами интерфейса.

Использование с формами Ant Design

InputNumber легко интегрируется с компонентом Form.Item, поддерживая валидацию и управление формой:

import { Form, InputNumber, Button } from 'antd';

<Form>
  <Form.Item
    label="Возраст"
    name="age"
    rules={[{ required: true, message: 'Введите возраст' }]}
  >
    <InputNumber min={0} max={120} />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">Отправить</Button>
  </Form.Item>
</Form>

В этом примере компонент участвует в валидации формы и автоматически передаёт значение при отправке.

Настройка стиля и размера

  • size – может принимать значения 'small', 'middle' (по умолчанию) и 'large'.
  • style – позволяет задать CSS-свойства, например, ширину.

Пример:

<InputNumber size="large" style={{ width: 200 }} defaultValue={50} />

Дополнительные возможности

  • decimalSeparator – задаёт разделитель десятичных знаков (например, ',' для европейского формата).
  • keyboard – если true (по умолчанию), позволяет изменять значение с клавиатуры стрелками.
<InputNumber decimalSeparator="," />
  • Поддержка stepStrictly, которая принудительно округляет значение к кратным шагам:
<InputNumber min={0} max={10} step={2} stepStrictly />

Итог

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

Оглавление