Как сделать компонент конвертации валюты - PullRequest
Новая
       22

Как сделать компонент конвертации валюты

1 голос
/ 02 марта 2020

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

Я пытался использовать react-number-format, все работает нормально, но в зависимости от сделанного расчета слишком много десятичных знаков, я хочу ограничить это всего лишь 2:

too many decimals

Я пытался использовать toFixed() и пытался округлить его либо, но в зависимости от вычисления я ввожу в бесконечном l oop, потому что мой handleChange метод таков: 

    // change amount to send
    const handleAmount = value => {
        setValues({
            ...values,
            amount: value,
            total: value * rates.rates[values.country]
        });
    };

    // change amount to receive
    const handleReceive = value => {
        setValues({
            ...values,
            total: value,
            amount: value / rates.rates[values.country]
        });
    };

Я хочу достичь чего-то вроде этого, не более 2 десятичных знаков:

achieve

Вот коды и окно с кодом, который не работает должным образом: https://codesandbox.io/s/zen-khorana-wks08

Как мне этого добиться?

Заранее спасибо

1 Ответ

0 голосов
/ 02 марта 2020

Так что я разобрался, как это решить. Я не мог использовать react-number-format, потому что он обновил оба значения, отформатировал их и дал мне ошибки.

Я использовал currency.js для форматирования чисел, исключая десятичный разделитель в поле, которое я печатаю, делая пользователю проще ввести значение: 

  const [values, setValues] = React.useState({
    field1: "",
    field2: ""
  });

  const rate = 12341941;

  const handleChange = (value, field) => {
    if (field === "field1") {
      setValues({
        field1: currency(value, { precision: 0 }).format(),
        field2: currency(value)
          .multiply(rate)
          .format()
      });
    }
    if (field === "field2") {
      setValues({
        field1: currency(value)
          .divide(rate)
          .format(),
        field2: currency(value, { precision: 0 }).format()
      });
    }
  };

Вот коды и поля для тех, у кого такая же проблема: https://codesandbox.io/s/zen-khorana-wks08

...