在内部获取 NaN <input type="number"/>（React）

Question

我正在尝试使用 React 创建一个货币转换网站，但遇到了一个问题。每当我在此输入中输入数字

<input value={sourceAmount} onChange={handleSourceAmountChange} type="number"    />

时，我都会在

<input type="number" value={targetAmount} readOnly />

中得到NaN。

在这里您可以看到我的 GitHub 存储库 (https://github.com/Patriciagracia/currency-conversion/tree/master/src)。另外，我将其部署在 Vercel 上 (https://currency-conversion-gray.vercel.app/)。

有人可以就我可能做错的事情提供一些指导吗？

谢谢你:)

我尝试添加 parseFloat 但没有成功。

Answer 1

我在这里检查了您的代码，发现您的代码存在一些问题： 第一次在货币选择器中加载此应用程序时，默认情况下不会自动选择任何值，这就是默认货币为空并给出 NAN 的原因。

当您选择货币时，它将给出准确的结果：

注意 您应该在应用程序加载时为源货币设置默认值。