Javascript 如何构建一个简单的美元/欧元货币转换器，并具有固定的转换比率？

作为练习，我需要构建一个非常简单的货币转换器，该转换器只能将货币从美元转换为欧元，反之亦然，并设置汇率（0.91/1.09）。 我希望我的App.js文件尽可能模块化。另外，我想使用钩子（而不是类组件）

我的文件结构：

src
├── 组件（保存所有组件）
│   ├── InputDollar.js（获取美元输入）
│   ├── InputEuro.js（获取欧元输入）
│   ├── Button.js（触发器转换）
│   └── Converter.js（将美元转换为欧元，反之亦然）
├── App.js（呈现所有组件）
└── Index.js（最终导出为html“根”id）

我想在这里发布到目前为止的所有代码可能太长了，但我共享一个沙箱：

我认为输入和按钮都很好。最可能有缺陷的是转换器组件（我在下面分享了它）（因为我对如何传递输入以及如何在if语句中编写正确的语法感到困惑）和应用程序组件，因为我很难在点击按钮时显示结果。

Converter.js

import React from "react";
import InputDollar from "./InputDollar"
import InputEuro from "./InputEuro"


function ConvertedValue() {

  let converted = function() {
    if(<InputDollar>!="") {
      ConvertedValue = (<InputDollar />* 0.9)
    } else if (<InputEuro>!="") {
      ConvertedValue = (<InputEuro />* 1.1)
    }
  }

  return (
    <div>
      {converted}
    </div>
  );
}

export default ConvertedValue;

从“React”导入React；
从“/InputDollar”导入InputDollar
从“/InputEuro”导入InputEuro
函数ConvertedValue（）{
设为converted=function（）{
如果（！=“”）{
ConvertedValue=（*0.9）
}否则如果（！=“”）{
ConvertedValue=（*1.1）
}
}
返回(
{已转换}
);
}
导出默认转换值；

---

你能帮我做这个练习吗？如果可能的话，请注释掉主要功能吗？

下面是我如何调整现有代码的方法：

1） 一个

组件，用于两种原因。它接受类型和标签以及

handleChange

方法

function Input(props) {

  const { label, type, handleChange } = props;

  function onChange(event) {

    // Pass in the type and value
    handleChange(type, event.target.value);
  }

  return (
    <div>
      <label>{label}</label>
      <input onChange={onChange} type="number" />
    </div>
  );
}

功能输入（道具）{
const{label，type，handleChange}=props；
函数onChange（事件）{
//传入类型和值
handleChange（类型、事件、目标、值）；
}
返回(
{label}
);
}

---

2） 在您的

中，我将如何调整您现有的代码：

1） 一个
组件，用于两种原因。它接受类型和标签以及
handleChange
方法

function Input(props) {

  const { label, type, handleChange } = props;

  function onChange(event) {

    // Pass in the type and value
    handleChange(type, event.target.value);
  }

  return (
    <div>
      <label>{label}</label>
      <input onChange={onChange} type="number" />
    </div>
  );
}

功能输入（道具）{
const{label，type，handleChange}=props；
函数onChange（事件）{
//传入类型和值
handleChange（类型、事件、目标、值）；
}
返回(
{label}
);
}

2） 在你的
嘿，安迪，谢谢。这是非常有用的评论，非常接近我想要实现的目标。缺少的部分实际上是一个按钮组件，它触发转换后的值，并在单击时显示。这看起来怎么样？取决于你想要按钮做什么。我已经更新了我的沙盒，以显示它在显示/隐藏div.Thx中的值之间切换的示例。。。我承认，这个按钮没有经过深思熟虑。我想让按钮显示一条警告消息，上面写着“x€是y$”（反之亦然）。重新考虑一下，您的第一种方法可能是更好的方法（没有按钮）。忘了用叉子了现在我想起来了，你的第一种方法最好的地方是它在下面显示转换后的值（就像你做的那样），但有两个调整：1）它加上转换后的货币，即如果输入美元，它在转换后加上欧元，反之亦然。2） 在输入1中输入一个值会自动删除输入2中的条目，因为输入2会变得混乱，否则哪个输入是可转换的。我使用两种状态（为了方便起见）切换它，没有按钮：嘿，安迪，thx。这是非常有用的评论，非常接近我想要实现的目标。缺少的部分实际上是一个按钮组件，它触发转换后的值，并在单击时显示。这看起来怎么样？取决于你想要按钮做什么。我已经更新了我的沙盒，以显示它在显示/隐藏div.Thx中的值之间切换的示例。。。我承认，这个按钮没有经过深思熟虑。我想让按钮显示一条警告消息，上面写着“x€是y$”（反之亦然）。重新考虑一下，您的第一种方法可能是更好的方法（没有按钮）。忘了用叉子了现在我想起来了，你的第一种方法最好的地方是它在下面显示转换后的值（就像你做的那样），但有两个调整：1）它加上转换后的货币，即如果输入美元，它在转换后加上欧元，反之亦然。2） 在输入1中输入一个值会自动删除输入2中的条目，因为它会变得混乱，否则哪个输入是可转换的。我使用了两种状态（为方便起见）切换它，并且没有按钮：