javascript - 如何制作货币转换组件

Question

我正在尝试创建一个具有两个字段的货币转换组件。两者都是可编辑的，因此您可以输入目的地金额或起始金额。

我尝试使用react-number-format，它工作正常，但是根据所做的计算，小数点太多了，我想将其限制为只有2:

我尝试使用toFixed()并尝试对其进行舍入，但取决于我在无限循环中输入的计算，因为我的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位小数:

以下是codesandbox，其中包含未按预期工作的代码:https://codesandbox.io/s/zen-khorana-wks08

我怎样才能实现这个目标？

提前致谢

Answer 1

所以我想出了如何解决这个问题。我无法使用 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