десятичное число в формате реагирующих чисел в процентах

Question

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

https://material-ui.com/components/text-fields/

Я столкнулся с ситуацией, когда данные, которые я получаю из API - десятичное число, но пользователь хочет взаимодействовать с ним в процентах.

Например: 0,1201 должно отображаться как 12,01% в поле

Пользователь должен иметь возможность редактировать поле в процентах, но данные должны быть снова отправлены в API в виде десятичного числа.

Пример: поле изменилось с 12,01% до 15,01%, но значение должно быть сохранено как 0,1501.

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

Есть ли способ сделать это с реагировать числовой формат? Если нет, то есть ли способ сделать это с TextField пользовательского интерфейса?

Answer 1

Вы можете сделать это с помощью «форматирования» числового формата. Например:

<NumberFormat value={0.1255} format={v => Number(v) * 100 + "%"}/>

Answer 2

Да, вы можете сделать это с форматом числа реакции .

Поскольку вы можете полностью контролировать <NumberFormat /> с помощью реквизитов value и onValueChange, укажите значение с помощью *100 и установите значение с помощью /100 в функции обработчика будет в порядке.

const onValueChangeHandler = (event: NumberFormatValues) => {
  // event.floatValue / 100
  // use the `floatValue` rather than `formattedValue`
}

<NumberFormat
  suffix={'%'}
  decimalScale={2}
  value={value * 100}
  onValueChange={onValueChangeHandler}
/>;

---

См .:

Интерфейс события для NumberFormat

• узел_модулей \ номер-формата-реагирования \ наборы \ число_форматов.d.ts

export interface NumberFormatValues {
  floatValue: number | undefined;
  formattedValue: string;
  value: string;
}