Валюта маски ввода формата React + TypeScript

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

Вот мой вклад

<InputAnimation
required
type = {"number"}
placeholder = {" "}
label = {"Valor"}
onChange = {event=>setValue(event.target.valueAsNumber)}
value = {value}
/>

Я перепробовал множество руководств, однако в большинстве из них показано, как это сделать в jQuery или JS, и это не очень хорошо работает для React+Typescript.

html reactjs typescript

11.04.2023 15:47

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

265

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Чтобы отформатировать входное значение для использования маски для валюты BRL в React с Typescript, вы можете использовать такой пакет, как react-number-format или react-currency-format. Вот пример того, как вы можете использовать react-number-format.

npm install react-number-format

import NumberFormat from 'react-number-format';

...
...
...

<NumberFormat
  required
  placeholder = {" "}
  label = {"Valor"}
  onValueChange = {(values) => {
    const { value } = values;
    setValue(value);
  }}
  value = {value}
  thousandSeparator = {true}
  prefix = {"R$ "}
  decimalScale = {2}
/>

Спасибо. Я пытался использовать десятичный разделитель в виде запятой вместо точки, но похоже, что это не поддерживается. Есть идеи?

— 11.04.2023 19:03

11.04.2023 15:51

Ответ принят как подходящий

Вот как я это исправлял:

<Инпутанимация необходимый тип = {"текст"} заполнитель = {" "} label = {"Доблесть"} идентификатор = "ввод пользователя" onChange = {formatNumberToBRL} значение = {форматированное значение} />

И функция:

function formatNumberToBRL(event: React.ChangeEvent<HTMLInputElement>): void {
    // Remove any non-numeric characters from the input
    let userInput: string = event.target.value.replace(/[^0-9]/g, '');

    if (userInput === '') {
      // If the input is empty, set the formatted value to "R$ 0,00"
      setFormattedValue('R$ 0,00');
      setValue(0);
    } else {
      // Convert the input to a number and divide by 100 to get the value in BRL
      let userInputAsNumber: number = parseInt(userInput, 10) / 100;

      // Format the number as BRL currency
      let formattedNumber: string = `R$ ${userInputAsNumber.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.")}`;

      // Update the state with the formatted value and the user input
      setFormattedValue(formattedNumber);
      setValue(userInputAsNumber);
    }
}

Таким образом, нет необходимости в дополнительных компонентах или библиотеках.

12.04.2023 18:35